Tutorial by Examples

There are many situation where you want to draw an image that is rotated, scaled, and translated. The rotation should occur around the center of the image. This is the quickest way to do so on the 2D canvas. These functions a well suited to 2D games where the expectation is to render a few hundred e...

Steps#1-5 below allow any image or path-shape to be both moved anywhere on the canvas and rotated to any angle without changing any of the image/path-shape's original point coordinates. Move the canvas [0,0] origin to the shape's center point context.translate( shapeCenterX, shapeCenterY ); ...

Transformations alter a given point's starting position by moving, rotating & scaling that point. Translation: Moves a point by a distanceX and distanceY. Rotation: Rotates a point by a radian angle around it's rotation point. The default rotation point in Html Canvas is the top-left origin ...

Canvas allows you to context.translate, context.rotate and context.scale in order to draw your shape in the position & size you require. Canvas itself uses a transformation matrix to efficiently track transformations. You can change Canvas's matrix with context.transform You can change Canv...