Sometimes, we want to add multiple layers to an HTML canvas element with JavaScript.
In this article, we’ll look at how to add multiple layers to an HTML canvas element with JavaScript.
How to add multiple layers to an HTML canvas element with JavaScript?
To add multiple layers to an HTML canvas element with JavaScript, we create multiple canvas and use drawImage to draw them.
For instance, we write
const domCanvas = document.getElementById("some-canvas");
const domContext = domCanvas.getContext("2d");
domContext.fillRect(50, 50, 150, 50);
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 150, 150);
const canvas2 = document.createElement("canvas");
const ctx2 = canvas2.getContext("2d");
ctx2.fillStyle = "yellow";
ctx2.fillRect(50, 50, 100, 50);
domContext.drawImage(canvas, 0, 0, 200, 200);
domContext.drawImage(canvas2, 0, 0, 200, 200);
to get the domCanvas which is drawn on the screen directly with getElementById.
Then we create 2 canvases that aren’t drawn directly on the screen with createElement.
Next, we call drawImage to draw canvas and canvas2 which we added rectangles to with fillRect.
Conclusion
To add multiple layers to an HTML canvas element with JavaScript, we create multiple canvas and use drawImage to draw them.
