7 - Advanced image handling (3)

So, we've managed to draw an image onto our canvas, what else can we do with it?

Well, there are a few additional options available to us.
Next up we have...


This allows you to assign an offset to the image. These commands would be placed inside 
the "init" function.

Two different examples are:



The commands have the following meanings:

1) The first option would mean that if the image was drawn at 0,0 (i.e. the top left of a canvas), the image would actually be 50 pixels left and above the part you can see.

2) The second option, calculates the centre of the image, and allows you to position any image dead centre of a canvas, by simply placing the image at co-ordinates exactly half the width and half the length.

The normal "draw" command is used, but the handle is applied when drawn onto the canvas.

Most commonly used is the second variant. 

function init(){


function go(){


The reason for choosing 320 by 240 is chosen on the assumption that our canvas size is 640 by 480. Obviously if the canvas was for example 720 by 568, then to place image dead centre, we would draw the image at 360 by 284. 

Here is an example with draws our logo, dead centre in the canvas.

No comments:

Post a Comment