Home > Articles > Web Development > HTML/CSS

  • Print
  • + Share This
From the author of Feature #5: Transforming the Coordinate System

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.

  • + Share This
  • 🔖 Save To Your Account