Home > Articles > Web Development > HTML/CSS

  • Print
  • + Share This
From the author of Feature #3: Drawing Images and More with drawImage()

Feature #3: Drawing Images and More with drawImage()

It might seem strange that I've assigned less importance to image manipulation than to the mere task of drawing images with 2D context's drawImage() method, shown in Figure 8.

Figure 8 Drawing images.

The application in Figure 8 merely draws an image with drawImage(), but that method can do much more. For instance, you can use it in three different ways:

context.drawImage(image, destinationLeft, destinationTop);
context.drawImage(image, destinationLeft, destinationTop, destinationWidth, destinationHeight);
context.drawImage(image, sourceLeft, sourceTop, sourceWidth, sourceHeight, destinationLeft,
 destinationTop, destinationWidth, destinationHeight);

The first variant of drawImage() above draws an entire image at a specific destination in a canvas. The second variant also draws an entire image in a canvas, but it scales the image to the specified width and height. The third variant draws all or part of an image in a canvas, scaling the image along the way.

But that's not all drawImage() can do; in addition to images, drawImage() can draw another canvas or a video element. That capability opens the door to all kinds of interesting possibilities, including video-editing software.

  • + Share This
  • 🔖 Save To Your Account