• Choose a category
• All
• Classic-Fiction

function drawScreen(){

//draw a background so we can see the Canvas edges

context.fillStyle = "#ffffff";

context.fillRect(0,0,500,500);

context.drawImage(photo, windowX, windowY, windowWidth, windowHeight,

0,0,windowWidth*currentScale,windowHeight*currentScale);

}

function startUp(){

setInterval(drawScreen, 100 );

}

document.onkeydown = function(e){

e = e?e:window.event;

console.log(e.keyCode + "down");

switch (e.keyCode){

case 38:

//up

windowY-=10;

if (windowY<0){

windowY = 0;

}

break;

case 40:

//down

windowY+=10;

if (windowY>photo.height - windowHeight){

windowY = photo.height - windowHeight;

}

break;

case 37:

//left

windowX-=10;

if (windowX<0){

windowX = 0;

}

break;

case 39:

//right

windowX+=10;

if (windowX>photo.width - windowWidth){

windowX = photo.width - windowWidth;

}

break;

case 109:

//-

currentScale-=scaleIncrement;

if (currentScalecurrentScale = minScale;

}

break;

case 107:

//+

currentScale+=scaleIncrement;

if (currentScale>maxScale){

currentScale = maxScale;

}

}

}

When testing Example 4-15, use the arrow keys to pan across the photo, and the + and - keys to zoom in and out.

Pixel Manipulation

In this section, we will first examine the Canvas Pixel Manipulation API, and then build a simple application demonstrating how to manipulate pixels on the canvas in real time.

The Canvas Pixel Manipulation API

The Canvas Pixel Manipulation API gives us the ability to “get,” “put,” and “change” individual pixels utilizing what is known as the CanvasPixelArray interface. ImageData is the base object type for this manipulation, and an instance of this object is created with the createImageData() function call. Let’s start there.

The createImageData() function sets aside a portion of memory to store individual pixels’ worth of data based on the following three constructors:

imagedata = context.createImageData(sw, sh)

The sw and sh parameters represent the width and height values for the ImageData object. For example, imagedata=createImageData(100,100) would create a 100×100 area of memory in which to store pixel data.

imagedata = context.createImageData(imagedata)

The imagedata parameter represents a separate instance of ImageData. This constructor creates a new ImageData object with the same width and height as the parameter ImageData.

imagedata = context.createImageData()

This constructor returns a blank ImageData instance.

ImageData attributes

An ImageData object contains three attributes:

ImageData.height

This returns the height in pixels of the ImageData instance.

ImageData.width

This returns the width in pixels of the ImageData instance.

ImageData.data

This returns a single dimensional array of pixels representing the image data. Image data is stored with 32-bit color information for each pixel, meaning that every fourth number in this data array starts a new pixel. The four elements in the array represent the red, green, blue, and alpha transparency values of a single pixel.

Getting image data

To retrieve a set of pixel data from the canvas and put it into an ImageData instance, we use the getImageData() function call:

imagedata = context.getImageData(sx, sy, sw, sh)

sx, sy, sw, and sh define the location and size of the source rectangle to copy from the canvas to the ImageData instance.

NOTE

A security error will be thrown if the origin domain of an image file is not the same as the origin domain of the web page. This affects local files (when running on your hard drive rather than on a web server running locally or on a remote server), as most browsers will treat local image files as though they are from a different domain than the web page. When running on a web server, this error will not be thrown with local files. The current version of Safari (5.02) does not throw this error for local files.

Putting image data

To copy the pixels from an ImageData instance to the canvas, we use the putImageData() function call. There are two different constructors for this call:

context.putImageData