HTML5 Canvas

HTML5 Canvas: Erasing shapes

large-post-image-erasing

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

HTML5 Canvas 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).

View markup

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.

HTML5 Canvas erasing rectangles

View demo

The markup

View 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.

HTML5 Canvas erasing flower shape

View demo

The markup

View 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>