Path2D object example: Using the clip() function with a Path2D object

An example of using the clip() function with a Path2D object

«Back to the Path2D object article

This is an example of using the clip() function with a Path2D object.

[No canvas support]
<script>
    // Use the jQuery ready() function
    $(document).ready(function ()
    {
        var canvas  = document.getElementById('cvs')
        var context = canvas.getContext('2d');
        
        // Set the fill color
        context.fillStyle = '#aaf';
        
        // Create the path to which we'll clip the canvas to
        var path = new Path2D();
        path.moveTo(50,50);
        path.quadraticCurveTo(650,200,100,200);
        path.closePath();
        
        // Clip to the shape we've just created
        context.clip(path);
        
        // Now draw a rectangle over the whole canvas to show the clipping region in action. Because
        // of the clipping only part of the shape is painted to the canvas.
        context.fillRect(0,0,600,250);
    });
</script>