HOME HTML CSS XML JAVASCRIPT ASP PHP SQL MORE...

HTML5 Tutorial

HTML5 Home
HTML5 Introduction
HTML5 New Elements
HTML5 Video
HTML5 Video/DOM
HTML5 Audio
HTML5 Drag and Drop
HTML5 Canvas
HTML5 SVG
HTML5 Canvas vs. SVG
HTML5 Geolocation
HTML5 Web Storage
HTML5 App Cache
HTML5 Web Workers
HTML5 SSE

HTML5 Forms

HTML5 Input Types
HTML5 Form Elements
HTML5 Form Attributes

HTML5 Reference

HTML5 Tags
HTML5 Attributes
HTML5 Events
HTML5 Audio/Video
HTML5 Canvas 2d
HTML Valid DTDs

HTML5 canvas bezierCurveTo Method

HTML5 track Tag Reference HTML5 canvas reference

Example

Draw a path from one point to another and stretch the path from two controllpoints:

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.bezierCurveTo(20,100,200,100,200,20);
ctx.stroke();

Try it yourself »

Definition and Usage

The bezierCurveTo method creates a line from the path's current point to the specified point, via two controlpoints.

The bezierCurveTo method takes six parameters, the x and y coordinates for the first controlpoint, the x and y coordinates for the second controlpoint, and the x and y coordinates for the line's destination.

Current point

moveTo(20,20)

CurveTo point

bezierCurveTo(20,100,200,100,200,20)

Controllpoint 1

bezierCurveTo(20,100,200,100,200,20)

Controllpoint 2

bezierCurveTo(20,100,200,100,200,20)

Tip: Check out the quadraticCurveTo method. It has one controllpoint instead of two.

JavaScript syntax:	context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);

Browser Support

The bezierCurveTo method is supported in all major browsers.

Parameter Values

Parameter	Values	Description	Play it
cp1x	x-coordinate	The x-coordinate of the first controlpoint	Play it »
cp1y	y-coordinate	The y-coordinate of the first controlpoint	Play it »
cp2x	x-coordinate	The x-coordinate of the second controlpoint	Play it »
cp2y	y-coordinate	The y-coordinate of the second controlpoint	Play it »
x	x-coordinate	The x-coordinate of where to create the line to	Play it »
y	y-coordinate	The y-coordinate of where to create the line to	Play it »