4 - Drawing an Image from a file

Now that we have established how to draw a canvas, the next logical step is to draw an image onto it.

Firstly we have to define a variable, and then assign an image to that variable.
Before we start the "init" function, define the variable, as shown below.

// with a local file var mylogo = new image('logo.gif'); // with a remote image var mylogo = new image('http://codef.namwollem.co.uk/files/logo.gif');

As you can see there are two methods of loading the image, it can be a local image (where the image file is stored in the same local directory/file structure as the HTML file you are writing), or a remote image (where you are calling on an image stored on a remote server - i.e. on the internet somewhere). Images can be .JPG, .BMP, .PNG, .GIF formats. (.BPG is supported, but requires an additional library to correctly format the image). In this case, we'll use my logo, which happens to be a .GIF file.

The simplest method to draw the image, is to place the command in the "go" function. We 'draw' using this command: IMAGENAME.draw(WHICHCANVAS,XPOS,YPOS,ALPHA,ROTATION,SCALEX,SCALEY);

I'll now explain each variable, and give some examples.

IMAGENAME refers to the variable name, in our example it is "mylogo".

WHICHCANVAS refers to the name of the canvas you wish to draw to. XPOS and YPOS refer to the location on the canvas X number of pixels in from the left, and Y number of pixels down from the top. ALPHA is the normalised value of the alpha (default=1, 0 would be invisible, 0.5 would be semi-transparent).

ROTATION refers to the rotation angle of the image in degrees (default=0). (It should be noted that 360 is the same as 0, 370 is the same as 10 and so on).

SCALEX and SCALEY is the normalised zoom factor (default=1, 2 is twice as big etc). The two values are NOT required to be the same, so shape distortion is possible. (It should be noted that if the image zoom is higher than 1, canvas will be default attempt to smooth the image - if you wish to retain the sharpness of the image, and resultant pixelation, a set of additional commands must be added to the "init" function - see end of this section for more details). Unused elements of the command can be ignored, and the default will be applied. So therefore, the following two commands are the same: mylogo.draw(mycanvas,0,0);

mylogo.draw(mycanvas,0,0,1,0,1,1);

So, for a "real" example, we will use three different examples of this command. function go(){

mylogo.draw(mycanvas,50,50); mylogo.draw(mycanvas,50,200,0.8,45); mylogo.draw(mycanvas,320,240,1,0,2,2);

}

These three examples carry out the following commands: 1) Our image is drawn on the main canvas, 50 pixels in from the left, and 50 pixels down from the top. 2) Our image is drawn on the main canvas, 50 pixels in from the left, and 200 pixels down from the top, with a delta (or fade) of 0.8 (so it will be partially transparent), and a 45 degree rotation applied. 3) Our image is drawn on the main canvas, 320 pixels in from the left, and 240 pixels down from

the top, with a zoom factor on both X and Y planes.

Here is an example which shows these examples of this command in use.

Note:

As mentioned above, the commands to cancel the image smoothing by default on canvas is as follows:

mycanvas.contex.imageSmoothingEnabled = false; mycanvas.contex.mozImageSmoothingEnabled = false; mycanvas.contex.oImageSmoothingEnabled = false;

These commands should be put into the "init" function AFTER the canvas you are applying this command to has been defined.