An example of the HTML5 canvas path functions: a quadraticCurveTo() example

This draws a quadratic curve. There is a moveTo() call which moves the "pen" to the left end point - then the quadraticCurveTo() function gives the second and third points.

[No canvas support]
<script>
    context = document.getElementById('cvs').getContext('2d');
    
    context.beginPath();
        context.moveTo(50,200);
        context.quadraticCurveTo(300,0,550,200);
    context.stroke();
</script>

« Back to article