Canvas Draw Paths

Posted in Canvas Tutorial

Updated on May 19, 2024

By Mari Selvan

👁️ 40 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The HTML <canvas> element provides a powerful tool for drawing graphics on a web page dynamically. One of the key features of the canvas is its ability to draw paths, which allows for the creation of complex shapes and lines.

In this guide, we'll explore how to use the canvas API to draw paths, covering the syntax, methods, and examples.

💡 Syntax

The canvas API offers several methods for drawing paths. Here's a basic overview of the syntax:

Syntax

Copied

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

// Begin a new path
ctx.beginPath();

// Define path commands
// Example: ctx.moveTo(x, y);
// Example: ctx.lineTo(x, y);

// Close the path (optional)
// Example: ctx.closePath();

// Stroke or fill the path
// Example: ctx.stroke();
// Example: ctx.fill();

🧰 Methods

beginPath(): Starts a new path.
moveTo(x, y): Moves the pen to the specified coordinates without drawing anything.
lineTo(x, y): Draws a straight line from the current position to the specified coordinates.
closePath(): Connects the current point to the starting point of the path, creating a closed shape.
stroke(): Draws the outline of the path with the current stroke style.
fill(): Fills the interior of the path with the current fill style.

📄 Example

Let's draw a simple triangle on the canvas:

example.js

Copied

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

// Begin path
ctx.beginPath();

// Define triangle path
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(100, 150);
ctx.closePath();

// Stroke the path
ctx.strokeStyle = 'blue';
ctx.stroke();

🧠 How it works?

In this example, we've drawn a triangle with vertices at (50, 50), (150, 50), and (100, 150), and stroked it with a blue color.

🎉 Conclusion

Drawing paths on the HTML canvas opens up a world of possibilities for creating custom graphics and visualizations on the web.

By mastering the syntax and methods for working with paths, you can leverage the full potential of the canvas API to bring your creative visions to life.