FxCanvas Documentation

Appearance

Drawing Ellipses ​

Ellipses are versatile oval shapes that form the basis for many graphical elements, from simple circles to complex curved forms. In FxCanvas, ellipses can be drawn as filled shapes, outlines, or partial arcs, giving you precise control over curved geometry.

Understanding Ellipses ​

An ellipse is defined by its center point and two radii (horizontal and vertical). When both radii are equal, you get a perfect circle. Ellipses are fundamental for creating organic shapes, buttons, icons, and decorative elements.

Drawing Filled Ellipses ​

Filled ellipses create solid oval shapes, perfect for backgrounds, buttons, and organic forms.

The fillEllipse(x, y, radiusX, radiusY) method draws a filled ellipse centered at the specified coordinates.

javascript
import { CanvasEncoder, Color } from 'fxcanvas';

const canvas = new CanvasEncoder(400, 200);

// Draw a filled circle (equal radii)
canvas.setFillStyle(new Color(0, 0, 255)); // blue
canvas.fillEllipse(100, 100, 50, 50);

// Draw an oval (different radii)
canvas.setFillStyle(new Color(0, 128, 0)); // green
canvas.fillEllipse(200, 100, 80, 40);

The ellipse is filled with the current fillStyle, which can be a solid color, gradient, or pattern.

Drawing Stroked Ellipses ​

Stroked ellipses create outlined oval shapes, useful for borders, frames, and decorative elements.

The strokeEllipse(x, y, radiusX, radiusY) method draws the ellipse outline using current stroke settings.

javascript
// Configure stroke
canvas.setStrokeStyle(new Color(255, 0, 0)); // red
canvas.setLineWidth(3);

// Draw stroked ellipse
canvas.strokeEllipse(100, 100, 60, 30);

The outline follows the ellipse path, with the stroke style determining its appearance.

Drawing Partial Ellipses (Arcs) ​

For more control, you can draw only portions of ellipses using the arc() or ellipse() methods within paths.

javascript
// Draw a semicircle using arc
canvas.setFillStyle(new Color(255, 165, 0)); // orange
canvas.beginPath();
canvas.arc(100, 100, 50, 0, Math.PI);
canvas.fill();

// Draw a quarter circle outline using ellipse
canvas.setStrokeStyle(new Color(128, 0, 128)); // purple
canvas.setLineWidth(2);
canvas.beginPath();
canvas.ellipse(200, 100, 40, 40, 0, 0, Math.PI / 2);
canvas.stroke();

Angles are measured in radians, with 0 at the positive x-axis (3 o'clock position).

Rotated Ellipses ​

Ellipses can be rotated using the canvas transformation matrix.

javascript
// Save current state
canvas.save();

// Rotate and draw
canvas.translate(150, 150);
canvas.rotate(Math.PI / 4); // 45 degrees
canvas.setFillStyle(new Color(0, 128, 128)); // teal
canvas.fillEllipse(0, 0, 60, 30);

// Restore state
canvas.restore();

This creates tilted ellipses, useful for dynamic graphics.

Transformations enable dynamic ellipse positioning; see Transformations.

Advanced Ellipse Techniques ​

Combining Fill and Stroke ​

javascript
canvas.setFillStyle(new Color(255, 255, 224)); // lightyellow
canvas.setStrokeStyle(new Color(255, 165, 0));  // orange
canvas.setLineWidth(4);

canvas.fillEllipse(100, 100, 50, 50);
canvas.strokeEllipse(100, 100, 50, 50);

Elliptical Arcs with Custom Angles ​

javascript
// Draw a 120-degree elliptical arc
canvas.setStrokeStyle(new Color(0, 100, 0)); // darkgreen
canvas.setLineWidth(3);
canvas.beginPath();
canvas.ellipse(100, 100, 60, 40, 0, Math.PI / 6, Math.PI / 6 + 2 * Math.PI / 3);
canvas.stroke();

Ellipses with Gradients ​

javascript
const gradient = new RadialGradient(100, 100, 0, 100, 100, 50);
gradient.addColorStop(0, new Color(255, 255, 0)); // yellow
gradient.addColorStop(1, new Color(255, 0, 0)); // red

canvas.setFillStyle(gradient);
canvas.fillEllipse(100, 100, 50, 50);

Gradients add visual depth to ellipses; see Working with Gradients.

Nested Ellipses ​

javascript
// Create concentric ellipses
canvas.setFillStyle(new Color(255, 0, 0, 0.3));
canvas.fillEllipse(100, 100, 60, 40);

canvas.setFillStyle(new Color(0, 255, 0, 0.3));
canvas.fillEllipse(100, 100, 40, 30);

canvas.setFillStyle(new Color(0, 0, 255, 0.3));
canvas.fillEllipse(100, 100, 20, 15);

Ellipses provide smooth, natural curves that enhance the visual appeal and professionalism of your FxCanvas applications.