D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
syntagmatic
Full window
Github gist
Canvas Compositing
<canvas id="picture0" width=200 height=200></canvas> <canvas id="picture1" width=200 height=200></canvas> <canvas id="picture2" width=200 height=200></canvas> <canvas id="picture3" width=200 height=200></canvas> <script> var compositing = ["source-over", "lighter", "darker", "xor"]; for (var i=0; i<4; i++) { render(i); } function render(i) { var canvas = document.getElementById("picture" + i); var ctx = canvas.getContext("2d"); ctx.globalAlpha = 0.5; ctx.globalCompositeOperation = compositing[i]; ctx.font = "14pt sans-serif"; ctx.fillText(compositing[i],40,16); ctx.fillStyle = "red"; ctx.fillRect(20,20,100,100); ctx.fillStyle = "green"; ctx.fillRect(60,60,100,100); ctx.fillStyle = "blue"; ctx.fillRect(100,10,80,80); } </script> <style> canvas { float: left; margin: 12px; box-shadow: 0 0 4px #999; } </style>