v138 · canvas

DOM Compositor

Compose multiple independent DOM subtrees onto a single canvas — each with its own transform, opacity, and blend mode. Shows the compositing model: layer order, transform origin, and globalAlpha applied per drawElement() call.

checking…

Each layer is a separate DOM element. Click a layer to select it, then adjust opacity and rotation before compositing.

layers
    100%
    0°
    Select a layer and click Composite.
    canvas output
    const ctx = canvas.getContext('2d');

// Layer 1: header card, full opacity, no rotation
ctx.save();
ctx.globalAlpha = 1;
ctx.drawElement(headerEl, 0, 20);
ctx.restore();

// Layer 2: badge, semi-transparent, rotated
ctx.save();
ctx.globalAlpha = 0.75;
ctx.translate(120, 140);
ctx.rotate(-0.2);
ctx.drawElement(badgeEl, -50, -20);
ctx.restore();

// Layer 3: chart, shifted down
ctx.save();
ctx.globalAlpha = 0.9;
ctx.drawElement(chartEl, 0, 220);
ctx.restore();

// drawElement() rasterises live DOM — CSS, fonts, images, all included

    see also