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.