- Feature #10: Path-Based Graphics and the Nonzero Winding Rule
- Feature #9: Hit Detection
- Feature #8: canvas Is an HTML Element
- Feature #7: Temporary Drawing
- Feature #6: Offscreen Canvases
- Feature #5: Transforming the Coordinate System
- Feature #4: Image Manipulation
- Feature #3: Drawing Images and More with drawImage()
- Feature #2: The Clipping Region
- Feature #1: New Functionality in the 2D API
- Conclusion
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
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.