HTML5 Canvas JavaScript Code to a Draw Bezier Curve
By Stephen Bucaro
The <canvas> element was added in HTML5. The canvas element allows you, in certain circumstances,
to not need to load a graphic element on your page, but instead to use JavaScript to the draw the graphics.
It's easy to use the canvas, just define a HTML canvas element similar to how you would define a div
element, and then configure the context. The context is like a box of drawing tools.
The Bezier curve is named after the French mathematician Pierre Bezier who developed the formulas for
drawing precise curves using the Cartesian coordinate system. In this article I describe how to use
JavaScript to draw Bezier curves on the HTML5 canvas element.
The canvas context bezierCurveTo() method is used to draw a curve.
Bezier Curve Syntax
bezierCurveTo(c1x, c1y, c2x, c2y, x, y)
c1x | x coordinate of the first control point |
c1y | y coordinate of the first control point |
c2x | x coordinate of the second control point |
c2y | y coordinate of the second control point |
x | x coordinate for the end point |
y | y coordinate for the end point |
Below is the code for the example shown above.
<canvas id="myCanvas" width="280" height="250" style="border:solid 1px; margin-top:10px;"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.strokeStyle = "purple";
ctx.lineWidth = 3;
ctx.fillStyle = "yellow";
// draw a Bezier curve (c1x, c1y, c2x, c2y, x, y)
ctx.beginPath();
ctx.moveTo(100,50);
ctx.bezierCurveTo(20,100,250,80,200,200);
ctx.stroke();
ctx.lineWidth = 2;
// draw dots at control point locations
ctx.beginPath();
ctx.arc(20,100,2,0,2*Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.arc(250,80,2,0,2*Math.PI);
ctx.stroke();
</script>
Note that you use the context moveTo() method to define first point of the curve.
The above example demonstrates a cubic Bezier curve. A cubic Bezier curve requires two control points.
A quadratic cubic Bezier curve requires only one control point. Shown below is the syntax for a
A quadratic cubic Bezier curve.
bezierCurveTo(cx, cy, x, y)
cx | x coordinate of the control point |
cy | y coordinate of the control point |
x | x coordinate for the end point |
y | y coordinate for the end point |
Below is the code for the example shown above.
<canvas id="myCanvas2" width="220" height="130" style="border:solid 1px; margin-top:10px;"></canvas>
<script>
var canvas = document.getElementById("myCanvas2");
var ctx = canvas.getContext("2d");
ctx.strokeStyle = "purple";
ctx.lineWidth = 3;
ctx.fillStyle = "yellow";
// draw a quadratic Bezier curve (cx, cy, x, y)
ctx.beginPath();
ctx.moveTo(20,20);
ctx.quadraticCurveTo(20,100,200,20);
ctx.stroke();
ctx.lineWidth = 2;
// draw dot at control point location
ctx.beginPath();
ctx.arc(20,100,2,0,2*Math.PI);
ctx.stroke();
</script>
How to Determine Control Point Coordinates
There are several ways to determine the coordinates of control points. The first method is just wing it,
understanding that the control point attracts the closest area of the line to the control point. Estimate
the x,y coordinates of a control point, test it, and then adjust it as necessary. The second method is to
use a vector graphics application like the free open-source Inkscape application, which provides rulers that
display the x,y coordinates of a control point. Unfortunately Inkscape's y axis in numbered in reverse, so
you'll need to convert the y coordinate. The third method is to use an online canvas code generator like
BezierCurveTo command generator to
design your curve, and then transfer the coordinates to your code.
More Java Script Code: • Easy Java Script Code for Sideways Slide show • Concatenating a String and Another Data Type • JavaScript Code to Display Wait Cursor While Image Loads • Let Your Web site Visitors Set Font Size • JavaScript Code for Binary to Hexadecimal - Hexadecimal to Binary Conversion • Java Script to Get Selected Item from Select List Option Group • Easy Java Script Windows • Easy Picture Zoom Code • Password Protection Using the Frames Method • Java Script Code to Calculate Speed / Distance of Falling Object
|