{"id":107,"date":"2016-01-02T20:00:55","date_gmt":"2016-01-02T20:00:55","guid":{"rendered":"http:\/\/www.federicojacobi.com\/2\/?p=107"},"modified":"2016-01-02T20:00:55","modified_gmt":"2016-01-02T20:00:55","slug":"layers-on-canvas","status":"publish","type":"post","link":"https:\/\/federicojacobi.com\/2016\/01\/02\/layers-on-canvas\/","title":{"rendered":"Layers on Canvas"},"content":{"rendered":"
\n

TLDR;<\/h4>\n

Can’t be done natively, use this instead:\u00a0layeredCanvas<\/a><\/p><\/blockquote>\n

 <\/p>\n

HTML5 Canvas doesn’t implement a layers mechanism. In order to implement this you can do it in 2 different ways:<\/p>\n

Multiple canvas\u00a0elements approach<\/h4>\n

Think of a layer as an individual canvas and then absolute position one on top of the other. Then to lay it out just wrap on a div with position relative:<\/p>\n

<div style=\"width: 300px; height: 300px; position: relative\">\n\t<canvas id=\"layer1\" width=\"300\" height=\"300\" style=\"position: absolute;\"><\/canvas>\n\t<canvas id=\"layer2\" width=\"300\" height=\"300\" style=\"position: absolute;\"><\/canvas>\n\t<canvas id=\"layer3\" width=\"300\" height=\"300\" style=\"position: absolute;\"><\/canvas>\n<\/div>\n<script>\nfunction layer1() {\n\tcanvas = document.getElementById( \"layer1\" );\n\tctx = canvas.getContext( '2d' );\n\n\tctx.fillStyle = \"#E5E059\";\n\tctx.fillRect( 50, 50, 150, 150 );\n}\nfunction layer2() {\n\tcanvas = document.getElementById( \"layer2\" );\n\tctx = canvas.getContext( '2d' );\n\n\tctx.beginPath();\n\tctx.fillStyle = \"#88A09E\";\n\tctx.arc( 275, 275, 150, 0, 2 * Math.PI );\n\tctx.fill();\n}\nfunction layer3() {\n\tcanvas = document.getElementById( \"layer3\" );\n\tctx = canvas.getContext( '2d' );\n\n\tctx.fillStyle = \"#C70039\";\n\tctx.beginPath();\n\tctx.moveTo(100, 100);\n\tctx.lineTo(100, 300);\n\tctx.lineTo(300, 300);\n\tctx.closePath();\n\tctx.fill();\n}\n\nlayer1();\nlayer2();\nlayer3();\n<\/script><\/pre>\n
What’s crappy about this is if you want to save the image you have to do a screenshot and then cut it, or you can only save one canvas element at a time.<\/p>\n
Single canvas element approach<\/h4>\n
Natively, there is no way of doing this, but with a little bit of abstraction, it isn’t a problem. Think of a layer as a function, now you call the functions in order and you are mostly layered:<\/p>\n
<canvas id=\"layeredCanvas\" width=\"300\" height=\"300\"><\/canvas>\n<script>\nfunction layer1( ctx ) {\n\tctx.fillStyle = \"#E5E059\";\n\tctx.fillRect( 50, 50, 150, 150 );\n}\nfunction layer2( ctx ) {\n\tctx.beginPath();\n\tctx.fillStyle = \"#88A09E\";\n\tctx.arc( 275, 275, 150, 0, 2 * Math.PI );\n\tctx.fill();\n}\nfunction layer3( ctx ) {\n\tctx.fillStyle = \"#C70039\";\n\tctx.beginPath();\n\tctx.moveTo(100, 100);\n\tctx.lineTo(100, 300);\n\tctx.lineTo(300, 300);\n\tctx.closePath();\n\tctx.fill();\n}\n\ncanvas = document.getElementById( \"layeredCanvas\" );\nctx2d = canvas.getContext( '2d' );\n\nlayer1( ctx2d );\nlayer2( ctx2d );\nlayer3( ctx2d );\n\n<\/script><\/pre>\n
This is still a bit crappy … lets make it slight more layer-like. We can make an array of functions and run them in sequence. This is much better because now we can remove (or change the index) an element from the array effectively replicating a layer feel:<\/p>\n
<canvas id=\"layeredCanvas\" width=\"300\" height=\"300\"><\/canvas>\n<script>\nrender = function( layers ) {\n\tfor ( var i = 0; i < layers.length; i++ ) {\n\t\tlayers[ i ]();\n\t}\n};\n\ncanvas = document.getElementById( \"layeredCanvas\" );\nctx = canvas.getContext( '2d' );\n\nlayers = [];\nlayers.push( function() {\n\tctx.fillStyle = \"#E5E059\";\n\tctx.fillRect( 50, 50, 150, 150 );\n} );\n\nlayers.push( function() {\n\tctx.beginPath();\n\tctx.fillStyle = \"#88A09E\";\n\tctx.arc( 275, 275, 150, 0, 2 * Math.PI );\n\tctx.fill();\n} );\nlayers.push( function() {\n\tctx.fillStyle = \"#C70039\";\n\tctx.beginPath();\n\tctx.moveTo(100, 100);\n\tctx.lineTo(100, 300);\n\tctx.lineTo(300, 300);\n\tctx.closePath();\n\tctx.fill();\n} );\n\nrender( layers );\n\n<\/script><\/pre>\n
DONE! Not too bad … using this principle I created a more elegant approach that allows you a couple more neat little things like show\/hide … try it, fork it, use it: layeredCanvas<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
TLDR; Can’t be done natively, use this instead:\u00a0layeredCanvas   HTML5 Canvas doesn’t implement a layers mechanism. In order to implement this you can do it in 2 different ways: Multiple canvas\u00a0elements approach Think of a layer as an individual canvas and then absolute position one on top of the other. Then to lay it out…  Read more »<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,6],"tags":[],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/federicojacobi.com\/wp-json\/wp\/v2\/posts\/107"}],"collection":[{"href":"https:\/\/federicojacobi.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/federicojacobi.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/federicojacobi.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/federicojacobi.com\/wp-json\/wp\/v2\/comments?post=107"}],"version-history":[{"count":0,"href":"https:\/\/federicojacobi.com\/wp-json\/wp\/v2\/posts\/107\/revisions"}],"wp:attachment":[{"href":"https:\/\/federicojacobi.com\/wp-json\/wp\/v2\/media?parent=107"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/federicojacobi.com\/wp-json\/wp\/v2\/categories?post=107"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/federicojacobi.com\/wp-json\/wp\/v2\/tags?post=107"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}