Canvas

Canvas Transform Stack

State Moves the Drawing Space

A canvas program saves drawing state, moves and rotates the coordinate system, draws a badge, restores state, and then writes text in the original space.

Program

Canvas transforms change the coordinate system for later drawing calls. Step through the source to see which operations change pixels and which only prepare state for the next draw.

canvas_transform_stack.js
Visuals: captured from real browser rendering
const canvas = document.querySelector('#badge-canvas');
const ctx = canvas.getContext('2d');

ctx.fillStyle = '#f8fafc';
ctx.fillRect(0, 0, 320, 200);

ctx.save();
ctx.translate(160, 100);
ctx.rotate(Math.PI / 8);

ctx.fillStyle = '#2563eb';
ctx.fillRect(-70, -40, 140, 80);

ctx.restore();

ctx.fillStyle = '#0f172a';
ctx.font = '700 28px sans-serif';
ctx.fillText('READY', 108, 110);

  1. Choose a light fill color for the canvas background.

    An empty canvas before the background fill is drawn
    Changing fillStyle updates drawing state only; no pixels change yet.

  2. Fill the canvas background.

    The canvas area is filled with a pale background
    fillRect paints immediately with the current fillStyle.

  3. Save the current drawing state.

    The pale canvas remains unchanged after save
    save() records state for later, but it does not draw.

  4. Move the drawing origin to the center of the canvas.

    The canvas still looks unchanged after translate
    translate() changes how future coordinates are interpreted.

  5. Rotate the drawing space around the translated origin.

    The canvas still looks unchanged after rotate
    Rotation prepares the next draw call without repainting existing pixels.

  6. Choose the badge fill color.

    The canvas still has only its pale background after choosing blue
    Changing fillStyle again prepares the badge rectangle.

  7. Draw the badge rectangle in transformed space.

    A blue rectangle appears tilted across the center of the canvas
    The rectangle coordinates are local to the translated and rotated drawing space.

  8. Restore the original drawing state.

    The tilted blue rectangle remains after restore
    restore() changes future drawing state, not the pixels already painted.

  9. Choose a dark fill color for text.

    The badge remains unchanged while text color is selected
    The next text draw will use the restored, unrotated coordinate system.

  10. Set the text font.

    The badge remains unchanged after setting the font
    Font state affects the next fillText call.

  11. Write unrotated text over the badge.

    The tilted blue badge has horizontal READY text across it
    Because the transform was restored, the text is not rotated with the badge.
transform state Canvas keeps transform state inside the drawing context. `translate()` and `rotate()` affect later coordinates.
save and restore `save()` pushes the current drawing state, and `restore()` returns to that saved state.
drawing space The same `fillRect()` call lands in a different place after the drawing space has been moved and rotated.
unrotated text After `restore()`, text uses the original coordinate system again.