Summary of how to draw Bezier curves in Creative

photo credit: Dave DeSandro via photopin cc

This time, as a reminder, I will summarize how to write Bezier curves in CreativeJS, which I used when I created a piece for the recent Yahoo Creative Award 2013.

1. try drawing Bezier curves in Illustrator or Photoshop

In Illustrator or Photoshop, use the pen tool to draw the curve you have in mind. For example, suppose you draw an S-shaped line as shown in the figure below. A Bezier curve is represented by a start vector and an end vector (or so we think). The green arrows represent the respective vectors. skitch.1

Place the cursor on the point of the Bezier curve you created and obtain the coordinate information. skitch.2

All points are expressed in coordinates, roughly as shown in the figure below.


2. prepare Canvas

Prepare a canvas element as shown below to create a Bezier curve there when the screen is loaded.

<canvas id="myCanvas" width=600 height=900></canvas>

3. write code

Overall code. Rough flow: + Prepare canvas element + Load CreateJS (only EaselJS library is used this time) + Create stage + Create myShape instance + Determine instance placement position + Create Bezier curve + Update stage

<!DOCTYPE html>
<html lang="ja">
canvas {
    border: 1px solid #000;
<body onload="initialize()">
<canvas id="myCanvas" width=600 height=900></canvas>
var createjs = window;
<script src="easeljs/utils/UID.js"></script>
<script src="easeljs/geom/Matrix2D.js"></script>
<script src="easeljs/geom/Point.js"></script>
<script src="easeljs/events/EventDispatcher.js"></script>
<script src="easeljs/display/DisplayObject.js"></script>
<script src="easeljs/display/Container.js"></script>
<script src="easeljs/display/Stage.js"></script>
<script src="easeljs/display/Bitmap.js"></script>
<script src="easeljs/display/Graphics.js"></script>
<script src="easeljs/display/Shape.js"></script>
<script src="easeljs/display/Shadow.js"></script>
    var stage;
    function initialize(){
        var canvasElement = document.getElementById("myCanvas");
        stage = new Stage(canvasElement);
    function setAppearance(instance, nX, nY){
        instance.x = nX;
        instance.y = nY;
    function createShape(nX, nY){
        var myShape = new Shape();
        var myGraphics =;
        setAppearance(myShape, nX, nY);

4. done!

Starting at 105, 95, a Bezier curve is drawn in the canvas element. (For clarity, the pixel ruler is displayed in the PixelWindow.)

Screenshot 2013-08-23 1.28.03