Tag Archives: curves

HTML5 Canvas, Video

Drawing quadratic curves

This tutorial explains how to draw quadratic curves on the HTML canvas. We can use the quadraticCurveTo() method to draw a quadratic curve on the canvas.

The quadratic curve is defined by three things: the context point, the control point, and the ending point. These curves can also be styled using the lineWidth, stroke style and lineCap properties just like regular lines.

Watch the video below and then scroll down to see the sample code.

Here is the sample code:

<!DOCTYPE html>
<html>
<head>
 <title>Quadratic curves</title>
 <style>
 #myCanvas{
 background-color: white;
 border: 1px solid black;
 }
 </style>
 
</head>
<body>
 <script>
 function draw(){
 var ctx = document.getElementById("myCanvas").getContext("2d");
 ctx.moveTo(50,50);
 ctx.lineTo(300,50);
 ctx.quadraticCurveTo(300,100,350,100); // (control point x, control point y, x, y)
 ctx.lineTo(350,200);
 ctx.stroke();
 }
 window.onload = draw;
 </script>
 
 <canvas id="myCanvas" width="500" height="350">
</body>
</html>