Functions

function makeFullPageCanvas();

Makes an area the full size of the web page that you can draw into.

function makeCanvas(width,height);

Makes a fixed size areas that you can draw into.

function clear();

Clears the drawing area.

function setColour(colour);

Sets the drawing colour.
The list of colour names can be seen at http://en.wikipedia.org/wiki/Web_colors

function drawCircle(centerX,centerY,size);

Draws a circle.
The center of the circle will be at the position centerX,centerY

This will draw one circle beside another.

   DrawCircle(50,50,10);
   DrawCircle(80,50,10);

This will draw one circle below another.

   DrawCircle(50,50,10);
   DrawCircle(50,80,10);

function fillCircle(centerX,centerY,size);

Draws a filled cicle. Otherwise the same as drawCircle.

function drawLine(x1,y1,x2,y2);

Draws a line.
One end of the line is at x1,y1. The other end is at x2,y2

function drawRectangle(x,y,width,height);

Draws a rectannge with the Top Left corner at X,Y

function drawRectangle(x,y,width,height);

Draws a filled rectangle. otherise the same as drawRectangle.

function makeBackground();

Turns the current canvas image into a background.
Once in the background the picture will not be cleared with clear. You may draw on top of the image and when clear(); is used the top layer will be cleared but the background will stay.

function loadImage(url,framesWide,framesHigh);

Loads an image from the place specified by url.

   var picture;
   picture = loadImage("smile.png");

Will load the file "smile.png" from the same folder as the program and place it in the variable named picture

You may also use full url paths.

   var logo;
   logo = loadImage("http://www.google.com/images/logos/ps_logo2.png");

Will load the Google logo from google.com and place it in the variable named logo

You may optionally specify framesWide and framesHigh values if you have a multiple frame animation in a single image. These are called SpriteSheets.

   var runner;
   runner = loadImage("http://www.thebest3d.com/pda/tutorials/array2animation/walksequence_spritesheet.png",5,5);

This code will download a 25 frame animation of a runner stored as a set of images evenly spaced 5 across and 5 down.

function drawImage(image,x,y,frame,angle);

Draws an image that has been loaded with loadImage.

The simplest form is:

   drawImage(picture,10,20);

In addition to the simple form you may also choose a frame from an animation

   drawImage(runner,200,300,5);

Animation frames are numbered from zero so the 25 frame runner animation uses frame numbers 0-24;

You may also rotate the image

   drawImage(logo,400,200,0,9.5);

This will draw the logo at 400,200 rotated by 9.5; Since the logo is not an animation, it only has a frame 0;

function keyIsDown(keycode);

Tests to see if a key is currently held down. The keycode is a number, for example the keycodes for the cursor keys are 37,38,39,40 for left,up,right,down respectively.

The following example reduces y by 1.5 if the up key is being held down.

  if ( keyIsDown(38) ) {
    y=y-1.5;
  }

function keyWentDown(keycode);

keyWentDown works the same as keyIsDown only it tests to see if the key has gone from unpressed to pressed.

It is possible to have keyIsDown() return false and keyWentDown() return true if someone pressed and released a key extremely quickly.