HTML5 Canvas Cookbook

Drawing a Quadratic curve

In this recipe, we'll learn how to draw a Quadratic curve. Quadratic curves provide much more flexibility and natural curvatures compared to its cousin, the arc, and are an excellent tool for creating custom shapes.

How to do it...

Follow these steps to draw a Quadratic curve:

1. Define a 2D canvas context and set the curve style:

   window.onload = function(){
       var canvas = document.getElementById("myCanvas");
       var context = canvas.getContext("2d");
       
       context.lineWidth = 10;
       context.strokeStyle = "black"; // line color

2. Position the canvas context and draw the Quadratic curve:

   context.moveTo(100, canvas.height - 50); context.quadraticCurveTo(canvas.width ...