Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


Presentation on theme: "Using Bitmap graphics Having looked at vector graphics in the canvas, we will now look at using bitmap graphics."— Presentation transcript:

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: )

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

Ads by Google