- 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 #5: Transforming the Coordinate System
By default, the origin of the canvas coordinate system is at the upper-left corner of the canvas, and the x coordinate increases from left to right, whereas the y coordinate increases from top to bottom. (Unintuitive, but true: It's not bottom to top, but rather top to bottom.) One of the most powerful features of the 2D API is the ability to transform that coordinate system in just about every way imaginable.
Figure 6 shows an application that lets users create polygons and subsequently rotate them to a desired angle. The application draws the polygons by temporarily translating the coordinate system to the polygon's center and rotating the coordinate system through the specified angle.
)
Figure 6 Creating and manipulating polygons.
Here's how the application draws polygons:
function drawPolygon(polygon, angle) {
context.save();
context.translate(tx, ty);
if (angle) {
context.rotate(angle);
}
// Now draw the polygon at (0,0) ...
context.restore();
}
Without the ability to translate and rotate the coordinate system, the drawPolygon() method would have to rotate each of the polygon's points manually.