CanvasRenderingContext2D.bezierCurveTo()
The CanvasRenderingContext2D
.bezierCurveTo()
method of the Canvas 2D API adds a cubic Bézier curve to the path. It requires three points. The first two points are control points and the third one is the end point. The starting point is the last point in the current path, which can be changed using moveTo()
before creating the Bézier curve.
Syntax
JavaScript
Copy Code
void <var>ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);</var>
Parameters
cp1x
- The x axis of the coordinate for the first control point.
cp1y
- The y axis of the coordinate for first control point.
cp2x
- The x axis of the coordinate for the second control point.
cp2y
- The y axis of the coordinate for the second control point.
x
- The x axis of the coordinate for the end point.
y
- The y axis of the coordinate for the end point.
Examples
Using the bezierCurveTo
method
This is just a simple code snippet drawing a bezier curve. The control points are red and the start and end points are blue.
HTML
HTML
Copy Code
<canvas id="canvas"></canvas>
JavaScript
JavaScript
Copy Code
var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(50,20); ctx.bezierCurveTo(230, 30, 150, 60, 50, 100); ctx.stroke(); ctx.fillStyle = 'blue'; // start point ctx.fillRect(50, 20, 10, 10); // end point ctx.fillRect(50, 100, 10, 10); ctx.fillStyle = 'red'; // control point one ctx.fillRect(230, 30, 10, 10); // control point two ctx.fillRect(150, 60, 10, 10);
Trying the bezierCurveTo
parameters
Edit the code below and see your changes update live in the canvas:
HTML
Copy Code
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> <input id="edit" type="button" value="Edit" /> <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.beginPath(); ctx.bezierCurveTo(50, 100, 180, 10, 20, 10); ctx.stroke();</textarea>
JavaScript
Copy Code
var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); var edit = document.getElementById("edit"); var code = textarea.value; function drawCanvas() { ctx.clearRect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addEventListener("click", function() { textarea.value = code; drawCanvas(); }); edit.addEventListener("click", function() { textarea.focus(); }) textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas);
Specifications
Specification | Status | Comment |
---|---|---|
WHATWG HTML Living Standard The definition of 'CanvasRenderingContext2D.beziercurveto' in that specification. |
Living Standard |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
See also
- The interface defining it,
CanvasRenderingContext2D
- WikiPedia article on Bézier curves.
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/api/canvasrenderingcontext2d/beziercurveto