Menu
I am about to implement Photoshop-like Layers in HTML5 Canvas. Currently I have two ideas. The first and maybe the simpler idea is to have a Canvas element for each layer like:
<canvas id="layerName" width="320" height="240" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas> <canvas id="layerName" width="320" height="240" style="position: absolute; left: 0; top: 0; z-index: 2;"></canvas> <canvas id="layerName" width="320" height="240" style="position: absolute; left: 0; top: 0; z-index: 3;"></canvas> This way when you draw to a layer -- it actually goes to that "layer". Layers with transparent positions can be seen through to below layers (Canvases). Layer stacking is controlled with z-index property.
The second idea is to use a single Canvas element and implement some logic to handle layers like in this case:
<!DOCTYPE html> <html> <head> <title>Test</title> <script> window.addEventListener('load', function() { var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var order = 0; function drawLayer1() { ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (10, 10, 55, 50); } function drawLayer2() { ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect (30, 30, 55, 50); } function draw() { ctx.clearRect(0, 0, 256, 256); if (order === 0) { drawLayer1(); drawLayer2(); } else { drawLayer2(); drawLayer1(); } } setInterval(draw, 250); setInterval(function() { order = 1 - order; }, 200); }, false); </script> </head> <body> <canvas id="canvas" width="256px" height="256px"></canvas> </body> </html> In the above code the two layers will change stacking order every 200msec.
So, the question is that which way would be the best way? What are the pros and cons of both approaches?
405
To open the Layers panel in Canvas Workspace, you have to click on the Layers icon. You can find this icon in the right toolbar. It's the one that is highlighted in blue on the image above. The Layers panel will allow you to have an overview of all the layers of your design.
The HTML5 canvas has the potential to become a staple of the web, enjoying ubiquitous browser and platform support in addition to widespread webpage support, as nearly 90% of websites have ported to HTML5.
The canvas element is part of HTML5 and allows for dynamic, scriptable rendering of 2D shapes and bitmap images.
If you want to use a single canvas element and have multiple layers inside it, you might want to look at my library:
It uses a damaged rect system to reduce the amount of repainting done every time the canvas changes, so not only do you get layers (which can be nested), but you also get optimised redraws.
50
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
