Placing two canvas elements on top of each other

[alexalex25]

I have tried to put them in { display: block; } but no luck :

[mattdesl]

A potentially simpler way would be to create a second canvas within the first sketch.

const sketch = ({ canvasWidth, canvasHeight }) => {
  const canvas2 = document.createElement('canvas');
  canvas2.width = canvasWidth;
  canvas2.height = canvasHeight;
  const context2 = canvas2.getContext('2d');
  return ({ context, width, height, scaleX, scaleY }) => {
    context2.save();
    context2.scale(scaleX, scaleY);
    /* draw to context2 */
    context2.restore();

    context.drawImage(canvas2, 0, 0, width, height);
  };
}

Just to note, this doesn't handle resizing (if you are running your sketch full-screen).

Another option is to use the code you've got, but use the { styleCanvas: false } setting so that you then apply styles manually to each canvas and have them position: absolute; in CSS.

[alexalex25]

Thx ! :)