HTML Canvas – Path Elements Tutorial

The HTML5 <canvas> element provides a way to draw shapes and paths using the Path API. Paths allow you to create intricate drawings by combining lines, curves, and shapes. This tutorial covers:

1. What are Path Elements?
2. Using the Path API to create shapes.
3. Combining lines and curves.
4. Drawing and filling paths.
5. Practical examples of path-based drawings.

1. What Are Path Elements?

Paths are sequences of points connected by lines or curves. They are drawn using the Path API, which includes:

• Lines: Straight connections between points.
• Curves: Quadratic or cubic Bezier curves.
• Arcs: Circular or elliptical curves.

Path Functions:

2. Basic Path Creation

Example 1: Drawing a Line Path

<canvas id="myCanvas" width="500" height="300" style="border: 1px solid black;"></canvas>
<script>
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");

    // Start a new path
    ctx.beginPath();
    ctx.moveTo(50, 50); // Start point
    ctx.lineTo(200, 50); // Draw a line to (200, 50)
    ctx.lineTo(200, 200); // Draw a line to (200, 200)
    ctx.stroke(); // Render the path
</script>

Explanation:

• beginPath: Starts a new path.
• moveTo(x, y): Moves the drawing cursor without creating a line.
• lineTo(x, y): Draws straight lines between points.

3. Drawing Curves

Example 2: Quadratic Bezier Curve

ctx.beginPath();
ctx.moveTo(50, 150); // Start point
ctx.quadraticCurveTo(150, 50, 250, 150); // Control point and end point
ctx.strokeStyle = "blue";
ctx.stroke();

Example 3: Cubic Bezier Curve

ctx.beginPath();
ctx.moveTo(50, 200); // Start point
ctx.bezierCurveTo(150, 100, 250, 300, 350, 200); // Two control points and end point
ctx.strokeStyle = "green";
ctx.stroke();

4. Drawing Arcs and Circles

Example 4: Circular Arc

ctx.beginPath();
ctx.arc(150, 150, 50, 0, Math.PI * 2); // Full circle
ctx.strokeStyle = "red";
ctx.stroke();

Example 5: Partial Arc

ctx.beginPath();
ctx.arc(300, 150, 50, 0, Math.PI); // Half circle
ctx.strokeStyle = "purple";
ctx.stroke();

5. Filling and Closing Paths

You can fill paths with colors or patterns and close them to form complete shapes.

Example 6: Filling a Path

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 50);
ctx.lineTo(200, 200);
ctx.closePath(); // Automatically connects the last point to the start point
ctx.fillStyle = "yellow";
ctx.fill(); // Fills the shape with color
ctx.stroke(); // Draws the outline

6. Combining Shapes with Paths

Example 7: Drawing a Star

function drawStar(ctx, cx, cy, spikes, outerRadius, innerRadius) {
    const step = Math.PI / spikes;
    let rotation = -Math.PI / 2;

    ctx.beginPath();
    for (let i = 0; i < spikes * 2; i++) {
        const radius = i % 2 === 0 ? outerRadius : innerRadius;
        const x = cx + Math.cos(rotation) * radius;
        const y = cy + Math.sin(rotation) * radius;
        ctx.lineTo(x, y);
        rotation += step;
    }
    ctx.closePath();
    ctx.fillStyle = "gold";
    ctx.fill();
    ctx.strokeStyle = "black";
    ctx.stroke();
}

drawStar(ctx, 250, 150, 5, 50, 25);

7. Using Path2D Objects

The Path2D object allows you to reuse paths or combine multiple paths.

Example 8: Using Path2D

const circlePath = new Path2D();
circlePath.arc(150, 150, 50, 0, Math.PI * 2);

const trianglePath = new Path2D();
trianglePath.moveTo(250, 50);
trianglePath.lineTo(300, 150);
trianglePath.lineTo(200, 150);
trianglePath.closePath();

// Draw the paths
ctx.strokeStyle = "blue";
ctx.stroke(circlePath);

ctx.fillStyle = "green";
ctx.fill(trianglePath);

Advantages of Path2D:

• Reuse paths without redefining them.
• Combine paths into more complex drawings.

8. Practical Example: Drawing a Flower

Example: A Flower with Petals

function drawPetal(ctx, x, y, radius, angle) {
    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.arc(x, y, radius, angle, angle + Math.PI);
    ctx.closePath();
    ctx.fillStyle = "pink";
    ctx.fill();
    ctx.stroke();
}

function drawFlower(ctx, x, y, radius, petalCount) {
    const step = (2 * Math.PI) / petalCount;
    for (let i = 0; i < petalCount; i++) {
        drawPetal(ctx, x, y, radius, i * step);
    }

    // Draw the center
    ctx.beginPath();
    ctx.arc(x, y, radius / 3, 0, Math.PI * 2);
    ctx.fillStyle = "yellow";
    ctx.fill();
}

drawFlower(ctx, 250, 150, 50, 8);

9. Best Practices for Paths

1. Use beginPath for Separate Shapes:
   • Always call beginPath before starting a new shape.
2. Reset Context Properties:
   • Properties like strokeStyle and fillStyle persist across drawings.
3. Reuse with Path2D:
   • Use Path2D for reusable and modular paths.

10. Conclusion

In this tutorial, you learned:

1. How to draw lines, curves, and arcs using the Path API.
2. How to combine shapes to create complex designs.
3. How to use Path2D for reusable paths.

Paths are the foundation of drawing on the Canvas API.