bezierCurveTo() Method Trick in Canvas using Illustrator

Someone in class asked about how to use the bezierCurveTo() method. If you want to draw something specific, there is a pretty cool trick you can do with Illustrator to get exact coordinates.

1. Open Illustrator and set the canvas size to be the same size as the canvas size in your JS.

2. Draw your curve using the pen tool.

3. Using the white arrow, click on the curve’s anchor point. You should see two handles attached to that, or control points.

4. Go to Window > Info in Illustrator. This will show you your mouse coordinates.

5. If you hover over the handles with the white arrow, you will not be able to see the coordinates in the Info window. Hover over the handles with the pencil tool. That should work!

6. Gather the (x,y) coordinates for the starting point, the (x,y) coordinates for both of the control points and the (x,y) coordinates for the ending points.

7. Here is the code:
<script>

var c=document.getElementById(“myCanvas”);

var ctx=c.getContext(“2d”);

ctx.beginPath();

//put (x,y) coordinates for the starting point below in moveTo

ctx.moveTo(94, 264);

//JS syntax: ctx.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)

//cp is control point

//x,y are (x,y) coordinates of the ending point

ctx.bezierCurveTo(77, 166, 229, 156, 275, 255);

ctx.stroke();

</script>

I’m attaching a photo so you can see what I mean.

And here is a reference: http://www.w3schools.com/tags/canvas_beziercurveto.asp

Happy drawing!

Week 02: Cool example from class

coolexample

You should just be able to copy + paste into ST2 without any issues.

*Don’t forget to post screenshots of your beautiful artwork!