Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

HTML5 Canvas JavaScript Code to a Draw Bezier Curve

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)
c1xx coordinate of the first control point
c1yy coordinate of the first control point
c2xx coordinate of the second control point
c2yy coordinate of the second control point
xx coordinate for the end point
yy 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)
cxx coordinate of the control point
cyy coordinate of the control point
xx coordinate for the end point
yy 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:
• Four Ways to Use Java Script Event Handlers
• Easy Picture Panning Code
• JavaScript Code for Binary to Hexadecimal - Hexadecimal to Binary Conversion
• How to Use HTML5 canvas arc and arcTo Functions
• Easy Moving Popup Code
• Code to Fade Between Two different Pictures
• Code for a Less annoying Popup Window
• Java Script Code for a Random Circle Generator
• Using the Java Script Date Object
• Java Script Message Boxes

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro



Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2017 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268