Using Bitmap graphics

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

2. 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:http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html)

3. 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

4. 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]+')'); </script>

5. 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]+')'); </script>

6. 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); </script>

7. Reminder: Javascript Image object • A JavaScript Image Object can be created in several ways: • by using one of the constructor methods below • by an <img> 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: http://www.w3.org/TR/2009/WD-html5-20090423/embedded-content-0.html#htmlimageelement

8. 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); </script>

9. 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); </script> • Modifying the pixels outside the imported image does not cause any problem, since they are all transparent

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

11. 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