Drawing Pictures

You can draw on the canvas very easily. This page walks you through drawing with some of the functions available.

The full list of functions you can use can be seen at API

setColour(colour)

sets the colour of the next thing to be drawn. Colour names that your browser should know can be found at http://en.wikipedia.org/wiki/X11_color_names#Color_name_charts

examples

   setColour("red");
   setColour("green");
   setColour("#FF0080");

drawLine(x1,y1,x2,y2)

draws a straight line from x1,y1 to x2,y2

examples

   drawLine(50,10,300,240);
   drawLine(40,30,10,10);
   drawLine(ax,bx,ax+10,bx+32);

drawCircle(centerX,centerY,radius);

draws a circle centered at centerX,centerY with a size of radius.

examples

   drawCircle(30,150,10);
   drawCircle(400,150,100);

fillCircle(centerX,centerY,radius);

identical to drawCircle except the circle is filled with color rather than just an outline.

drawRectangle(left,top,width,height);

draws a rectangle with the top-left corner at left,top and a size of width and height.

examples

   drawRectangle(300,15,20,10);
   drawRectangle(0,0,300,200);

fillRectangle(left,top,width,height);

identical to drawRectangle except the rectangle is filled width color rather than just an outline.

A jsbin version of this can be found at http://jsbin.com/jeguyedada/1/edit?js,output

(the jsbin version uses a slightly newer version of whio which provides a different fillPolygon function. fillShape is used instead. )