Canvas vs. SVG

Canvas renders rasterized bitmaps via JavaScript, making it resolution-dependent but highly performant for rendering massive numbers of objects. SVG, conversely, renders vector graphics using XML nodes, integrating natively with the DOM and retaining crispness at any zoom level, though it struggles under the weight of thousands of elements. For heavy data visualization (like thousands of nodes in a graph), Canvas excels. For highly interactive, crisp vector illustrations, SVG is preferred.

Initialization and Configuration

To begin rendering, an HTML <canvas> element must be instantiated. JavaScript then retrieves this element and accesses its rendering context.

<canvas id="drawArea" width="400" height="300"></canvas>

const surface = document.querySelector('#drawArea');
const ctx = surface.getContext('2d');

Dimension Constraints

The default dimensions of a canvas element are 300x150 pixels. Expanding the canvas must be done via the width and height HTML attributes. Applying dimensions through CSS scales the internal bitmap, causing distortion and blurriness.

// Incorrect approach: CSS scaling causes stretching
// <canvas style="width: 400px; height: 400px;"></canvas>

// Correct approach: Attribute configuration
// <canvas width="400" height="400"></canvas>

Furthermore, a 1-pixel line drawn on integer coordinates will appear blurry and 2 pixels wide because the canvas aligns the stroke center to the pixel grid boundary. Shifting coordinates by 0.5 (e.g., 50.5) aligns the stroke cleanly to the pixel grid.

Drawing Geometric Shapes

Coordinate System

The canvas employs a coordinate plane where the origin (0,0) sits at the top-left corner. The X-axis extends rightwards, and the Y-axis extends downwards.

Lines and Polylines

Path construction relies on moveTo(x, y) to establish the starting point, lineTo(x, y) to plot subsequent points, and stroke() to render the path.

ctx.beginPath();
ctx.moveTo(50, 80);
ctx.lineTo(250, 80);
ctx.stroke();

When rendering multiple independent lines with different styles, beginPath() must be invoked. Failing to do so causes subsequent style declarations to retroactively affect previous paths in the current drawing state.

// First line
ctx.beginPath();
ctx.moveTo(40, 60);
ctx.lineTo(260, 60);
ctx.lineWidth = 8;
ctx.strokeStyle = 'tomato';
ctx.stroke();

// Second line
ctx.beginPath(); // Isolates the new path
ctx.moveTo(40, 100);
ctx.lineTo(260, 100);
ctx.lineWidth = 3;
ctx.strokeStyle = 'steelblue';
ctx.stroke();

Rectangles

Direct methods exist for rectangles without requiring path plotting.

• strokeRect(x, y, width, height): Renders an outlined rectangle.
• fillRect(x, y, width, height): Renders a solid rectangle.
• clearRect(x, y, width, height): Erases a rectangular region, creating transparency.
• rect(x, y, width, height): Adds a rectangular path to the current drawing state without immediately rendering it (requires fill() or stroke()).

ctx.fillStyle = 'coral';
ctx.fillRect(50, 50, 150, 100); // Solid rectangle

ctx.clearRect(70, 70, 110, 60); // Hollowed out area

ctx.strokeStyle = 'navy';
ctx.strokeRect(50, 50, 150, 100); // Border

Polygons and Paths

Closed shapes like triangles require closePath(), which draws a straight line from the current point back to the start, ensuring sharp, accurate corners even with thick strokes.

ctx.beginPath();
ctx.moveTo(100, 20);
ctx.lineTo(180, 180);
ctx.lineTo(20, 180);
ctx.closePath(); // Essential for clean corners

ctx.lineWidth = 12;
ctx.lineJoin = 'round';
ctx.stroke();

Circles and Arcs

The arc(x, y, radius, startAngle, endAngle, counterclockwise) method draws circular paths. Angles are specified in radians.

const toRadians = (degrees) => degrees * (Math.PI / 180);

ctx.beginPath();
ctx.arc(150, 150, 60, 0, toRadians(360));
ctx.closePath();
ctx.stroke();

For pure arcs or curves connecting points, arcTo(controlX, controlY, endX, endY, radius) calculates an arc tangent to the lines formed by the current point, the control point, and the end point.

ctx.beginPath();
ctx.moveTo(40, 40);
ctx.arcTo(120, 40, 120, 80, 50);
ctx.stroke();

Styling and Appearance

Stroke and Fill

strokeStyle defines outline colors, while fillStyle defines interior colors.

Line Attributes

• lineWidth: Determines thickness.
• lineCap: Styles line endings (butt, round, square).
• lineJoin: Styles corner intersections (miter, round, bevel).

Dashed Lines

setLineDash(array) creates dashed patterns. For instance, [10, 5] alternates a 10-pixel dash with a 5-pixel gap.

ctx.beginPath();
ctx.setLineDash([15, 10]);
ctx.moveTo(40, 40);
ctx.lineTo(260, 40);
ctx.stroke();

Non-Zero Winding Rule

The fill algorithm calculates winding numbers. If a path drawn clockwise intersects a sub-path drawn counter-clockwise, the overlapping region evaluates to zero and remains unfilled.

ctx.beginPath();
// Outer shape - clockwise
ctx.moveTo(50, 50);
ctx.lineTo(250, 50);
ctx.lineTo(250, 250);
ctx.lineTo(50, 250);
ctx.closePath();

// Inner shape - counter-clockwise
ctx.moveTo(200, 100);
ctx.lineTo(100, 100);
ctx.lineTo(100, 200);
ctx.lineTo(200, 200);
ctx.closePath();

ctx.fillStyle = 'purple';
ctx.fill();

Typography

Text rendering utilizes fillText(text, x, y) and strokeText(text, x, y). The font property mimics CSS shorthand (e.g., ctx.font = 'bold 24px sans-serif').

Alignment and Baselines

textAlign regulates horizontal anchoring (start, end, left, right, center). textBaseline controls vertical positioning relative to the Y coordinate (top, middle, alphabetic, bottom, hanging).

measureText('string').width calculates the precise pixel width of a string based on current font settings.

const label = 'Canvas';
ctx.font = 'bold 40px serif';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillStyle = 'teal';
ctx.fillText(label, 150, 150);

Image Manipulation

The drawImage() method integrates bitmaps.

• Basic: drawImage(image, dx, dy)
• Scaled: drawImage(image, dx, dy, dw, dh)
• Sliced: drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

Images must be fully loaded prior to rendering.

const asset = new Image();
asset.src = 'landscape.jpg';
asset.addEventListener('load', () => {
  // Crop a 100x100 region from top-left, render it at 20,20 scaled to 150x150
  ctx.drawImage(asset, 0, 0, 100, 100, 20, 20, 150, 150);
});