+ 1

Layering Canvas Elements

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

12th Jul 2018, 10:44 PM
Joshua Morgan
Joshua Morgan - avatar
7 ответов
0
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.
12th Jul 2018, 11:26 PM
James
James - avatar
+ 1
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?
12th Jul 2018, 10:55 PM
Dlite
Dlite - avatar
+ 1
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.
12th Jul 2018, 11:11 PM
James
James - avatar
+ 1
so is this impractical?
12th Jul 2018, 11:13 PM
Joshua Morgan
Joshua Morgan - avatar
0
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.
12th Jul 2018, 11:02 PM
Joshua Morgan
Joshua Morgan - avatar
0
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
12th Jul 2018, 11:24 PM
KrOW
KrOW - avatar
0
That answers my question perfect. thank you.
13th Jul 2018, 12:17 AM
Joshua Morgan
Joshua Morgan - avatar