Skip to content

Instantly share code, notes, and snippets.

@syntagmatic
Last active December 14, 2015 00:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save syntagmatic/5003052 to your computer and use it in GitHub Desktop.
Save syntagmatic/5003052 to your computer and use it in GitHub Desktop.
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment