Canvas Draw Quadratic

Last Updated:

How to Draw Quadratic

Your browser does not support the canvas element.

To draw a quadratic, follow these steps

  1. canvas - Assigning the canvas element to a variable.
  2. ctx - Assigning the 2d rendering context to another variable by calling the getContext('2d') method.
  3. beginPath() - Use beginPath() canvas method to start a new path by emptying the list of sub-paths.
  4. moveTo() - Use moveTo() canvas method to begin a new sub-path at the point specified by the given (x, y) coordinates.
  5. quadraticCurveTo() - Use quadraticCurveTo() canvas method to add a quadratic Bézier curve to the current sub-path.
  6. stroke() - Use stroke() canvas method to stroke (outline) the current or given path with the current strokeStyle. The default strokeStyle is 'black'.

Example

HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <body> <canvas id="point" width="260" height="120"> Your browser does not support the canvas element. </canvas> <script> var canvas = document.getElementById('point'); var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.moveTo(5, 100); ctx.quadraticCurveTo(230, 150, 250, 10); ctx.stroke(); </script> </body> </html>

Syntax

ctx.quadraticCurveTo(cpx, cpy, x, y)

Attributes Value

ValueExplanation
cpx Specifies the x-axis coordinate of the control point.
cpy Specifies the y-axis coordinate of the control point.
x Specifies the x-axis coordinate of the end point.
y Specifies the y-axis coordinate of the end point.

Share this Page

Meet the Author