Canvas Draw Bezier

Last Updated:

How to Draw a Bezier

Your browser does not support the canvas element.

To draw a bezier, 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. bezierCurveTo() - Use bezierCurveTo() canvas method to add a cubic 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="230" height="150"> 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, 5); ctx.bezierCurveTo(100,150, 200,10, 220,140); ctx.stroke(); </script> </body> </html>

Syntax

ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

Attributes Value

ValueExplanation
cp1x Specifies the x-axis coordinate of the first control point.
cp1y Specifies the y-axis coordinate of the first control point.
cp2x Specifies the x-axis coordinate of the second control point.
cp2y Specifies the y-axis coordinate of the second 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