As well as drawing shapes on a Canvas, shapes can also be erased. For the examples in this post, I have initially laid down a filled background rectangle, and erased shapes out of it to demonstrate.
Erasing lines
View demo
The markup
First of all, the black rectangle is placed down which will have a shape cut out of it, then I lay down the piece of markup which will make whatever shape I draw afterwards be cut out of it: ctx.globalCompositeOperation = "destination-out"; (in this example, a bezier curve with a stroke applied to it).
Javascript portion
function draw() {
// Erasing line
var canvas = document.getElementById("eraseLine");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
// Black background square
ctx.fillRect(0, 0, 200, 200);
// Erasing curved line
ctx.globalCompositeOperation = "destination-out";
ctx.beginPath();
ctx.moveTo(160, 40);
ctx.bezierCurveTo(90, 10, 60, 20, 10, 90);
ctx.lineWidth = 7;
ctx.stroke();
}
}
HTML portion
<body onLoad="draw();">
<canvas id="eraseLine" width="188" height="100"></canvas>
</body>
Erasing shapes
Erasing rectangles
I have covered clearing rectangles within the post about drawing simple shapes within an HTML5 Canvas. The clearRect context is used instead of the method used for the line above; this can obviously be used for rectangle shapes only.
View demo
The markup
Javascript portion
function draw() {
// Erasing rectangle
var canvas = document.getElementById("eraseRectangle");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
// Black background square
ctx.fillRect(0, 0, 200, 200);
// Cutout rectangle
ctx.clearRect(10, 10, 120, 120);
}
}
HTML portion
<body onLoad="draw();">
<canvas id="eraseRectangle" width="188" height="188"></canvas>
</body>
Erasing other shapes
To erase more complex shapes, the same method I used for erasing the line is used; ctx.globalCompositeOperation = "destination-out"; is added to the markup, and the shape is created afterwards.
View demo
The markup
Javascript portion
function draw() {
// Erasing flower shape
var canvas = document.getElementById("eraseFlower");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
// Black background square
ctx.fillRect(0, 0, 200, 200);
// Cutout flower shape
ctx.globalCompositeOperation = "destination-out";
ctx.beginPath();
ctx.moveTo(130.3, 37.6);
ctx.bezierCurveTo(126.0, -8.3, 56.3, -16.6, 47.4, 37.6);
ctx.bezierCurveTo(-1.4, 33.0, -17.0, 93.7, 21.9, 115.6);
ctx.bezierCurveTo(5.6, 158.7, 55.0, 192.7, 88.8, 162.3);
ctx.bezierCurveTo(119.3, 191.4, 172.3, 162.0, 155.7, 115.7);
ctx.bezierCurveTo(192.0, 98.4, 183.6, 33.7, 130.3, 37.6);
ctx.closePath();
ctx.fill();
}
}
HTML portion
<body onLoad="draw();">
<canvas id="eraseFlower" width="188" height="185"></canvas>
</body>
Nice post. Thanks for this information, helped me a lot!
Cheers.