Clipping paths

A clipping path is like a normal canvas shape but it acts as a mask to hide unwanted parts of shapes.
We use the clip method to create a new clipping path. By default the canvas element has a clipping path that’s the exact same size as the canvas itself (i.e. no clipping occurs).
In below example We’ll be using a circular clipping path to restrict the drawing of a set of random stars to a particular region.
In the first few lines of code We draw a black rectangle the size of the canvas as a backdrop and translate the origin to the center. Below this We create the circular clipping path by drawing an arc. By calling the clip method the clipping path is created. Clipping paths are also part of the canvas save state. If we wanted to keep the original clipping path we could have saved the canvas state before creating the new one.
Everything that’s drawn after creating the clipping path will only appear inside that path. You can see this clearly in the linear gradient that’s drawn next. After this a set of 50 randomly positioned and scaled stars is drawn (I’m using a custom function for this). Again the stars only appear inside the defined clipping path.


        <title>Canvas tutorial</title>
            function draw(){
                var ctx = document.getElementById('canvas').getContext('2d');
                ctx.fillRect(0, 0, 150, 150);
                ctx.translate(75, 75);
                // Create a circular clipping path
                ctx.arc(0, 0, 60, 0, Math.PI * 2, true);
                // draw background
                var lingrad = ctx.createLinearGradient(0, -75, 0, 75);
                lingrad.addColorStop(0, '#232256');
                lingrad.addColorStop(1, '#143778');
                ctx.fillStyle = lingrad;
                ctx.fillRect(-75, -75, 150, 150);
                // draw stars
                for (var j = 1; j < 50; j++) {
                    ctx.fillStyle = '#fff';
                    ctx.translate(75 - Math.floor(Math.random() * 150), 75 - 
					Math.floor(Math.random() * 150));
                    drawStar(ctx, Math.floor(Math.random() * 4) + 2);
            function drawStar(ctx, r){
                ctx.moveTo(r, 0);
                for (var i = 0; i < 9; i++) {
                    ctx.rotate(Math.PI / 5);
                    if (i % 2 == 0) {
                        ctx.lineTo((r / 0.525731) * 0.200811, 0);
                    else {
                        ctx.lineTo(r, 0);
    <body onload="draw();">
        <canvas id="canvas" width="200" height="200">

You may also like...