Overview

In this chapter, we will delve into the fundamentals of the Canvas coordinate system, providing you with a solid foundation for manipulating shapes and objects on the Canvas.

Introduction to Coordinate System

In the last introductory chapter you may got familiar with this system, let's recall it. The Canvas element utilizes a two-dimensional Cartesian coordinate system to define the positions of objects within its space. This system consists of an x-axis (horizontal) and a y-axis (vertical), intersecting at the origin point (0, 0) located at the top-left corner of the Canvas.

Canvas Coordinate System

• The x-axis increases positively from left to right, with higher values indicating positions towards the right.
• The y-axis increases positively from top to bottom, with higher values indicating towards the bottom.
• The unit of measurement is typically in pixels, where each pixel represents a single unit along x and y axis.

Coordinate System Origin and Direction

• The origin point (0, 0) serves as the reference point for all coordinates on the Canvas.

Translation Transformation

• Translation is the process of moving objects from one position to another.
• In Canvas, translation is achieved using the translate() method, which shifts the origin of the coordinate system.
• Syntax: context.translate(x, y), where x and y are the distance to move the origin along the x-axis and y-axis, respectively.