Introduction

The JavaScript Canvas API provides powerful tools for drawing graphics. One of the fundamental concepts is using paths. A path is a sequence of lines and curves that define a shape. The `moveTo()` and `lineTo()` functions are essential for creating these paths. This section will explain how these functions work and how to use them to draw custom shapes.

Understanding `moveTo()` and `lineTo()`

Before you can draw anything, you need to understand how the canvas coordinates work. The origin (0, 0) is at the top-left corner of the canvas. The x-coordinate increases as you move right, and the y-coordinate increases as you move down. `moveTo(x, y)`: This function moves the starting point of the current path to the specified coordinates (x, y). It's like lifting your pen and placing it at a new spot on the canvas. It *doesn't* draw anything; it just sets the starting point. `lineTo(x, y)`: This function draws a straight line from the current starting point to the specified coordinates (x, y). It effectively "connects the dots." After `lineTo` executes, the current starting point is updated to be (x,y).

Example: Drawing a Simple Line

Let's draw a line from (50, 50) to (200, 100):

 const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

ctx.beginPath(); // Start a new path
ctx.moveTo(50, 50); // Move to (50, 50)
ctx.lineTo(200, 100); // Draw a line to (200, 100)
ctx.stroke(); // Render the path (actually draw the line) 

Mastering Custom Paths

By combining `moveTo()` and `lineTo()` calls, you can create complex custom shapes. Remember that you need to call `beginPath()` to start a new path and `stroke()` (or `fill()`) to render the path.

Example: Drawing a Triangle

Here's how to draw a simple triangle:

 const canvas2 = document.getElementById('myCanvas2');
const ctx2 = canvas2.getContext('2d');

ctx2.beginPath();
ctx2.moveTo(150, 50); // Top vertex
ctx2.lineTo(50, 150); // Bottom-left vertex
ctx2.lineTo(250, 150); // Bottom-right vertex
ctx2.closePath(); // close the path (connect the last point to the first point).  Optional, but good practice for closed shapes
ctx2.stroke(); 

Example: Drawing a Polygon

You can define the corners of a polygon and then draw lines between them:

 const canvas3 = document.getElementById('myCanvas3');
const ctx3 = canvas3.getContext('2d');

const points = [
    {x: 50, y: 50},
    {x: 100, y: 20},
    {x: 150, y: 50},
    {x: 150, y: 120},
    {x: 100, y: 150},
    {x: 50, y: 120}
];

ctx3.beginPath();
ctx3.moveTo(points[0].x, points[0].y);

for (let i = 1; i < points.length; i++) {
    ctx3.lineTo(points[i].x, points[i].y);
}

ctx3.closePath();
ctx3.stroke(); 

Styling Paths

After you've defined a path, you can style it using properties like `strokeStyle` (for the line color), `lineWidth` (for the line thickness), `fillStyle` (for the fill color), and more.

 const canvas4 = document.getElementById('myCanvas4');
const ctx4 = canvas4.getContext('2d');

ctx4.beginPath();
ctx4.moveTo(50, 50);
ctx4.lineTo(200, 100);
ctx4.lineTo(50, 150);
ctx4.closePath();

ctx4.strokeStyle = 'blue';  // Line color
ctx4.lineWidth = 5;     // Line thickness
ctx4.fillStyle = 'lightblue'; // Fill color

ctx4.fill();  // Fill the shape
ctx4.stroke(); // Draw the outline