Using Bitmap graphics Having looked at vector graphics in the canvas, we will now look at using bitmap graphics

Bitmap for a new canvas To understand some of the examples on some of the following slides, it must be remembered that When a canvas is initialized, its bitmap is set to transparent black ( Reference: )

Capturing bitmap data for (any part of) the canvas The context class provides a method for accessing the bitmap for the entire canvas or for any part of the canvas Format: getImageData(X,Y,width,height), where (X,Y) is the upper-left corner of the area whose bitmap is required width and height specify the size of the area whose bitmap is required Example usage: var imageData = context.getImageData(0, 0, canvas.width, canvas.height); The value returned by the function is an object of class ImageData interface ImageData { readonly attribute unsigned long width; readonly attribute unsigned long height; readonly attribute Uint8ClampedArray data; }; We can now read and/or alter the contents of the data array in this object Each pixel in the bitmap is represented by four elements in the image data, representing the red, green, blue, and alpha component of the pixel

Accessing bitmap data Below, we access the bitmap data for a 50x50 rectangle at the upper left corner of a fresh canvas We see that the RGBA data for the pixel in the upper-left corner is (0,0,0,0) That is this pixel is transparent black - so are all the others <script var canvas= document.getElementById('myCanvas'); var context = canvas.getContext("2d"); var bitmap = context.getImageData(0, 0,50,50); var data=bitmap.data; alert('RGBA for first pixel is ('+data[0]+','+data[1]+','+data[2]+','+data[3]+ ')');

Accessing bitmap data (contd.) Below, we fill the canvas with semi-opaque red before accessing the bitmap data for a 50x50 rectangle at the upper left corner We see that the RGBA data for the pixel in the upper- left corner is (255,0,0,128), where 128/255 is the best available approximation to 0.5 <script … context.fillStyle="rgba(255,0,0,0.5)"; context.fillRect(0,0,canvas.width,canvas.height); var bitmap = context.getImageData(0, 0, 50,50); var data=bitmap.data; alert('RGBA for first pixel is ('+data[0]+','+data[1]+','+data[2]+','+data[3]+')');

Modifying the image by editing the bitmap Below, we swop the red and green bytes in the bitmap data for a 50x50 rectangle at the upper left corner of the canvas and then use the putImageData method to write the modified bitmap data into the context <script … context.fillStyle=“rgb(255,0,0)"; context.fillRect(0,0,100,100); var bitmap = context.getImageData(0, 0, 50,50); var data=bitmap.data; //Remember that Javascript arrays are assigned by reference //so changing data will change the bitmap for (var i = 0; i < data.length; i += 4) { var temp1 = data[i]; //red var temp2 = data[i + 1]; //green data[i] = temp2; data[i + 1] = temp1; } context.putImageData(bitmap, 0, 0);

Reminder: Javascript Image object A JavaScript Image Object can be created in several ways: –by using one of the constructor methods below –by an element in the HTML source code (or by using the createElement method of the DOM document object) Constructors Image(), Image(in unsigned long width) Image(in unsigned long width, in unsigned long height) interface HTMLImageElement : HTMLElement { attribute DOMString alt; attribute DOMString src; attribute DOMString useMap; attribute boolean isMap; attribute unsigned long width; attribute unsigned long height; readonly attribute boolean complete; }; Reference:

We can import external images into the context bitmap Create an Image object to access an external image Then use drawImage to write image's data into the context <script … var imageObj = new Image(); imageObj.src = 'uccQuad.jpg'; var destX = 10; var destY = 10; var width = 200; var height = 160; context.drawImage(imageObj, destX,destY,width,height);

Modifying an imported image Note how, since initial canvas was transparent, we can modify all of it <script … var imageObj = new Image(); imageObj.src = 'uccQuad.jpg'; var destX = 10; var destY = 10; var width = 200; var height = 160; context.drawImage(imageObj, destX,destY,width,height); var imageData = context.getImageData(0,0,canvas.width,canvas.height); var data=imageData.data; for (var i = 0; i < data.length; i += 4) {data[i]=255-data[i]; data[i+1]=255-data[i+1]; data[i+2]=255-data[i+2]; } context.putImageData(imageData, 0, 0); Modifying the pixels outside the imported image does not cause any problem, since they are all transparent

Animation We will be considering animation in the canvas but, first, we will consider a range of related topics

Reminder: variable scope in Javascript In JavaScript, variable scope is a bit strange. It is determined –not just by where a variable is declared –but, in some cases, whether the keyword var is used Global variables –A variable declared outside any function definition can be referenced anywhere in the Javascript on the current page –A variable declared inside a function without the var keyword become global once the function is called Local variables –A variable declared with the keyword var inside a function is local