In this lesson we will study how to create HTML Canvas path , methods of HTML Canvas path such as:
beginPath() method, moveTo(x, y) method, lineTo(x, y) method, arc(x, y, radius, startAngle, endAngle, anticlockwise), arcTo(x1, y1, x2, y2, radius) method, quadraticCurveTo(cpX, cpY, x, y), bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, x, y), bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, x, y), closePath(),closePath(), fill() and stroke().
A path is a collection of sub-paths, each consisting of a set of points and curves.
Paths can be used to draw lines, curves, arcs, and more.
To start creating a path, you need to call the beginPath() method.
This clears any existing sub-paths and prepares the canvas for defining a new path.
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath(); // Begin a new path
Once the path is initiated, you can use various methods to add points, lines, curves, and arcs to the path.
HTML canvas provides several methods to work with paths.
These methods allow you to define and manipulate the shape of the path by adding points, lines, curves, and arcs.
Here are the commonly used methods for working with paths:
Starts a new path by clearing any existing sub-paths.
Moves the current position of the path to the specified point (x, y) without drawing a line.
This method is typically used to move the starting point of a path.
Adds a straight line from the current position to the specified point (x, y).
Adds an arc to the path, defined by a center point (x, y), a radius, start angle, end angle, and direction (clockwise or anticlockwise).
Adds an arc that connects the current position to the specified point (x2, y2) using a radius and smoothly following the line defined by (x1, y1).
Adds a quadratic Bézier curve to the path, defined by a control point (cpX, cpY) and an end point (x, y).
Adds a cubic Bézier curve to the path, defined by two control points (cp1X, cp1Y) and (cp2X, cp2Y), and an end point (x, y).
Closes the current path by drawing a straight line from the current position to the starting point of the path. This method creates a closed shape.
Fills the current path with the current fill style.
Strokes (draws the outline of) the current path with the current stroke style.
var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(50, 50); ctx.lineTo(100, 100); ctx.arc(150, 150, 50, 0, Math.PI * 2, false); ctx.closePath(); ctx.fillStyle = "red"; ctx.fill(); ctx.lineWidth = 2; ctx.strokeStyle = "blue"; ctx.stroke();
In this example:
1- we begin a new path using beginPath(), move to (50, 50) using moveTo(), draw a line to (100, 100) using lineTo(), add an arc centered at (150, 150) with a radius of 50 using arc(), and close the path using closePath().
2-We then set the fill style to red, fill the path using fill(), set the stroke width to 2 and the stroke style to blue, and stroke the path using stroke().
By combining these path methods, you can create complex shapes and curves in your HTML canvas.
Here’s a complete code example that demonstrates the usage of some path methods in HTML canvas:
<!DOCTYPE html> <html> <head> <title>Canvas Paths Example</title> <style> canvas { border: 1px solid black; } </style> </head> <body> <canvas id="myCanvas" width="400" height="300"></canvas> <script> // Get the canvas element var canvas = document.getElementById("myCanvas"); // Get the 2D rendering context var ctx = canvas.getContext("2d"); // Begin a new path ctx.beginPath(); // Move to the starting point ctx.moveTo(50, 50); // Add a line ctx.lineTo(200, 50); // Add an arc ctx.arc(200, 150, 100, 0, Math.PI * 2, false); // Close the path ctx.closePath(); // Fill the path ctx.fillStyle = "red"; ctx.fill(); // Stroke the path ctx.lineWidth = 2; ctx.strokeStyle = "blue"; ctx.stroke(); </script> </body> </html>
In this example:
1- we create a canvas element with a width of 400 pixels and a height of 300 pixels.
2-We get the 2D rendering context of the canvas using getContext(“2d”).
3-We begin a new path using beginPath() and move to the starting point (50, 50) using moveTo(). Then, we add a line to (200, 50) using lineTo() and add an arc centered at (200, 150) with a radius of 100 using arc().
4-Finally, we close the path using closePath().
5-After defining the path, we set the fill style to red and fill the path using fill(). We also set the stroke width to 2 and the stroke style to blue, and stroke the path using stroke().
When you run this code, you will see a canvas with a filled shape and its outline drawn usins. g path
Try to modify the path definition, add more points, curves, or arcs, and experiment with different fill and stroke styles to create more complex shapes and achieve the desired visual effects in your HTML canvas.
Here’s a complete code example that demonstrates the usage of paths in HTML canvas:
<!DOCTYPE html> <html> <head> <title>Canvas Paths Example</title> <style> canvas { border: 1px solid black; } </style> </head> <body> <canvas id="myCanvas" width="400" height="300"></canvas> <script> // Get the canvas element var canvas = document.getElementById("myCanvas"); // Get the 2D rendering context var ctx = canvas.getContext("2d"); // Begin a new path ctx.beginPath(); // Define the path ctx.moveTo(50, 50); ctx.lineTo(100, 100); ctx.arc(150, 150, 50, 0, Math.PI * 2, false); // Close the path ctx.closePath(); // Fill the path ctx.fillStyle = "red"; ctx.fill(); // Stroke the path ctx.lineWidth = 2; ctx.strokeStyle = "blue"; ctx.stroke(); </script> </body> </html>
1- we create a canvas element with a width of 400 pixels and a height of 300 pixels.
2-We get the 2D rendering context of the canvas using getContext(“2d”).
3-We begin a new path using beginPath() and define the path by moving to the starting point (50, 50), drawing a line to (100, 100), and adding an arc with a center at (150, 150), a radius of 50, and spanning the full circle.
4-After defining the path, we close it using closePath() to connect the last point with the starting point.
5-Then, we set the fill style to red and fill the path using fill().
6-We also set the stroke width to 2 and the stroke style to blue, and stroke the path using stroke().
When you run this code, you will see a canvas with a filled shape and its outline drawn using paths.
Try to modify the path definition, add more points, curves, or arcs, and experiment with different fill and stroke styles to create more complex shapes and achieve desired visual effects in your HTML canvas.