Path2D object example: SVG path syntax

An example of using SVG path syntax to define a path

«Back to the Path2D object article

This is an example of using SVG path syntax to create your path. SVG path syntax looks like this:

var svg_path = 'M 100,100 h 50 v 50 h 50 A 30,30 0 0,1 35,20 z';
[No canvas support]
<script>
    $(document).ready(function ()
    {
        var canvas  = document.getElementById('cvs')
        var context = canvas.getContext('2d');
        
        // Set the fill color
        context.fillStyle = '#aaf';
        
        // Set the lineWidth
        context.lineWidth = 5;
        
        // Create the path
        var path = new Path2D('M 100,100 h 50 v 50 h 50 A 30,30 0 0,1 35,20 z');
        
        // Draw it to the canvas
        context.stroke(path);
        context.fill(path);
    });
</script>
    

Read more

You can read more about SVG paths on the Mozilla website.