Images and Gradients with Canvas and JavaScript
Objectives
Practice
More Info.
Files

Adding Images

The canvas element allows programmers not only to draw shapes, but to add pre-created images. The canvas can display any image type that the browser can display, but to be safe, stick to using .jpg, .png or .gif.

The first thing that needs to be done when drawing an image on the canvas is to load the image. This is done using JavaScript. First, we create an Image object and store it in a variable. This just means that we are creating a place in memory to hold an image and we give that place a name. Next, we identify the source of the image using the .src property and a relative path to the image. Finally, we wait for the image to load and, when it does, we are able to work with it.
var img = new Image(); img.src = '../images/pic.png'; img.onload = function(){ //do stuff here }

Once the image is loaded, we can draw it on the canvas. To do this, we use the drawImage method. The drawImage method takes three or five parameters (pieces of information). The standard version takes the image, and the x,y position of the upper left corner. So, to draw the image as created above: context.drawImage(img, 20, 50);

The second option allows us to scale the image. In other words, the width and height can be altered to stretch or shrink the image as it is drawn on the canvas. To draw the image created above as a 100 wide by 150 high picture, the code is: context.drawImage(img, 20, 50, 100, 150);
Both of the drawImage commands would be written above in place of '//do stuff here'.
Gradients

The canvas element, combined with JavaScript, will also allow a programmer to create a gradient. Both linear and radial gradients can be developed. The linear gradient creation method is called createLinearGradient and it takes four parameters - the x,y of the starting point and the x,y of the ending point. To create a horizontal gradient, make sure that both y values are the same and that the x values change. Below is the code to make a horizontal gradient that changes color over the course of 150 pixels: var gradient = context.createLinearGradient(0, 0, 150, 0);
To create a vertical gradient, the x values should stay the same and the y values should change. By changing both the x and y values, a vertical linear gradient can be created.

Once the gradient has been created, the color are chosen by adding color stops. A color stop is a place in the gradient where the color changes. Color stops can be located at any value between 0 (the start) and 1 (the end). IF the gradient is to be only two colors, then only two color stops (0 and 1) are needed. To change to a new color 2/3 of the way through, we would set a color stop at .66. Color stops are added using the addColorStop() method that takes two parameters - the location of the color stop (0 - 1) and the color. Colors can be reserved color names or hex values. Below is the code to set color stops that will change evenly from pink to white to purple, regardless of the gradient type. gradient.addColorStop(0, "pink"); gradient.addColorStop(.5, "white"); gradient.addColorStop(1, "purple");
Finally, a gradient is applied as the fill style for a shape (rectangle, cirlce, etc). If the shape is larger than the points specified by the gradient, the final color (at color stop 1) is used to fill in the extra space. If the shape is smaller than the gradient, then the gradient is cut off and the finaly color may or may not be fully realized. The code below will apply the above gradient to a 100 x 200 rectangle. The gradient will finish at 150 and the remaining 50 pixels of width will be purple. context.fillStyle = gradient; context.drawRect(0, 0, 200, 100);
Drawing Order

Finally, remember that items drawn on the canvas are layered. The last item drawn will appear on the top. So, if you want an image to appear on a gradient, the gradient must be drawn first, and the image drawn after.