Two types of curve

In this chapter you will learn:

  1. What are the methods to draw curves

Drawing Bezier Curves

The canvas supports drawing two kinds of Bezier curves: cubic and quadratic.

We pick a start and end point and then add one or more control points that shape the curve.

The curve methods:

NameDescriptionReturns
bezierCurveTo(cx1, cy1, cx2, cy2, x, y)Draws a Bezier curve to the point (x, y) with the control points (cx1, cy1) and (cx2, cy2).void
quadraticCurveTo(cx, xy, x, y)Draws a quadratic Bezier curve to (x, y) with the control point (cx, cy).void

Next chapter...

What you will learn in the next chapter:

  1. How to draw Quadratic Bezier Curves
Home » Javascript Tutorial » Canvas
Canvas tag
Canvas Context
Rectangle
Rectangle clear
Drawing State
Drawing state restore
Line width
Line Join Style
Line cap settings
Gradients
Linear Gradient
Radial Gradient
Path
Arcs
Two types of curve
Quadratic Bezier Curves
Cubic Bezier Curves
Clip
Text
Shadow
Transparency
Stoke style