How to Build a Transformed Image on JavaScript’s Canvas for HTML5 and CSS3 Programming

By Andy Harris

Transformations are math operations in JavaScript that can be applied to any drawing or image on you HTML5 and CSS3 page to change the appearance. There are three major transformations:

  • translation: Move a particular amount in X and Y

  • rotation: Rotate around a particular point

  • scale: Change the size of the drawing in X and Y

The <canvas> element allows all these operations on any type of drawing. However, the way the <canvas> element does this gets a little closer to math than you may have gotten before. Transformations in the canvas element can be hard to understand until you understand a little about how they really work.

In math, you don’t really transform objects. Instead, you modify the coordinate system, and draw your image in the newly transformed coordinate system. It’s common in a vector-drawing application to have several hidden coordinate systems working at once. That’s important because it’s the way canvas transformations work. Essentially when you want to perform transformations on an object, you’ll do the following:

  1. Announce the beginning of a temporary coordinate system.

    The main image already has its own coordinate system that won’t change. Before you can transform anything, you need to build a new coordinate system to hold those changes. The save() command indicates the beginning of a new coordinate system definition.

  2. Move the center with translate().

    The origin (0, 0) starts in the upper-left corner of the canvas by default. Normally you’ll build your transformed objects on the (new) origin and move the origin to place the object. If you translate(50, 50) and then draw an image at (0, 0), the image is drawn at the origin of the temporary coordinate system, which is at (50, 50) in the main canvas.

  3. Rotate the coordinate system with rotate().

    The rotate() command rotates the new coordinate system around its origin. The rotation parameter is a degree in radians.

  4. Scale the coordinate system in X and Y.

    You can also alter the new coordinate system by applying X and Y scale values. This allows you to create stretched and squashed images.

  5. Create elements in the new coordinate system.

    After you’ve applied all the transformations you want, you can use all the ordinary canvas drawing techniques. However, these drawings will be drawn in the “virtual” coordinate system you just made, not in the canvas’s main coordinate system.

  6. Close the temporary coordinate system.

    Generally you’ll want to apply different transformations to different parts of your canvas. When you’re finished with a particular transformation, use the restore() command to close out the new coordinate system. All subsequent drawing commands will use the default coordinate system of the <canvas> object.