Canvas Coordinates

HTML Canvas Coordinates

Understanding Canvas Coordinates

The HTML canvas is a two-dimensional grid. The coordinate system starts from the upper-left corner of the canvas.

• The x-coordinate increases as you move to the right.
• The y-coordinate increases as you move downwards.
• The upper-left corner of the canvas has the coordinates (0,0).

For example, if you used ctx.fillRect(0, 0, 150, 75); as shown in a previous chapter, this means:

• Start at the x-coordinate 0 and y-coordinate 0 (the top-left corner).
• Draw a rectangle that is 150 pixels wide (along the x-axis) and 75 pixels high (along the y-axis).

Coordinates Example Visualization

Imagine a canvas of 300 pixels wide and 150 pixels high (<canvas id="myCanvas" width="300" height="150"></canvas>):

• The point (0,0) is the top-left corner.
• The point (300,0) is the top-right corner.
• The point (0,150) is the bottom-left corner.
• The point (300,150) is the bottom-right corner.
• The point (150,75) would be the exact center of this canvas.

All drawing operations use these coordinates to position elements on the canvas.

Drawing a Line

To draw a straight line on the canvas, you typically use these methods:

• beginPath(): Starts a new drawing path. It’s good practice to call this before starting a new shape or line to avoid connecting to previous paths.
• moveTo(x, y): Moves the drawing cursor (pen) to the specified (x, y) coordinates without drawing a line. This defines the starting point of your line or path.
• lineTo(x, y): Adds a straight line from the current drawing position to the specified (x, y) coordinates.
• stroke(): Actually draws the path you’ve defined (e.g., the line) onto the canvas using the current strokeStyle and lineWidth.

// HTML: <canvas id="lineCanvas" width="300" height="150" style="border:1px solid #000;"></canvas>
const lineCanvas = document.getElementById('lineCanvas');
const lineCtx = lineCanvas.getContext('2d');

lineCtx.beginPath(); // Start a new path
lineCtx.moveTo(50, 50);   // Starting point of the line (x1, y1)
lineCtx.lineTo(250, 100); // Ending point of the line (x2, y2)
lineCtx.strokeStyle = 'blue'; // Set line color
lineCtx.lineWidth = 3;      // Set line thickness
lineCtx.stroke();         // Draw the line

Drawing a Circle (or Arc)

To draw a circle or an arc on the canvas, you use the arc() method:

• beginPath(): Again, important to start a new path.
• arc(x, y, radius, startAngle, endAngle, anticlockwise): - (x, y): Coordinates of the arc’s center. - radius: The radius of the arc. - startAngle: The angle (in radians) at which the arc starts, measured clockwise from the positive x-axis. - endAngle: The angle (in radians) at which the arc ends. - anticlockwise (optional): A boolean. If true, draws the arc counter-clockwise; otherwise, clockwise (default is false).
• fill() or stroke(): To fill the circle or draw its outline.

Note: Angles are in radians. To convert degrees to radians, use the formula: radians = degrees * Math.PI / 180. For a full circle, startAngle is 0 and endAngle is 2 * Math.PI.

// HTML: <canvas id="circleCanvas" width="200" height="120" style="border:1px solid #000;"></canvas>
const circleCanvas = document.getElementById('circleCanvas');
const circleCtx = circleCanvas.getContext('2d');

circleCtx.beginPath();
// x=95, y=50, radius=40, startAngle=0, endAngle=2*PI (full circle)
circleCtx.arc(95, 50, 40, 0, 2 * Math.PI);
circleCtx.fillStyle = 'green';
circleCtx.fill(); // Fill the circle

// Draw an outlined circle (stroke)
circleCtx.beginPath();
circleCtx.arc(150, 70, 30, 0, 2 * Math.PI);
circleCtx.strokeStyle = 'red';
circleCtx.lineWidth = 2;
circleCtx.stroke(); // Draw the circle's outline