Layering Canvas Elements

Question

I have heard of people separating objects with multiple canvas elements. what are the advantages of this and how will I know what objects belong in separate elements?
https://code.sololearn.com/W7LMc9Kq4zYW/?ref=app

Answer 1

Otherwise, perhaps you could have a single <canvas> element, but create three layers in javascript, with something like this.

function layer1(){
//code
}
function layer2(){
//code
}
function layer3(){
//code
}
function update(){
layer1();
layer2();
layer3();
}

That would put layer1 at the back, layer2 in the middle and layer3 on top. However, to edit the layers, you probably need to remake the whole canvas -- which is actually a common way to code using canvas; get a function to do it.

Answer 2

You should know that the canvas tag, isn't an ordinary Html tag.
To do anything with it, you need to use JS.
So let me ask you ::

What do you want to do?

Answer 3

I suppose if you can make the backgrounds transparent, it could work. In the CSS, to overlap them, try using...

canvas{
position: absolute;
left: 0;
top: 0;
}

PS: set their widths and heights in HTML, since CSS distorts them.

Answer 4

so is this impractical?

Answer 5

I'm pretty comfortable with html and Javascript. css also. I am just showing the template for example. I am practicing animation and need to know when canvas objects should be separate and when should be in same element.

Answer 6

The main advantage its performance in some case... usually with single canvas you have to clear all before paint next frame but imagine you developing a game with fixed elements like UI, backgrounds etc... You can have 3 canvas: One for UI, one for background another for dynamic elements... Because this division, your code will not need to draw static painting but only dynamic one (remember that any painting its not free in terms of calculation by gpu).
A disvantage its that more canvas its equal to more memory needed

Answer 7

That answers my question perfect. thank you.