Extracting Strokes From Canvas: A Step-By-Step Guide

The stroke() method of the HTML canvas is used to draw the path of a shape. This path is drawn with moveTo() and lineTo() methods. The element allows you to draw graphics on a web page using JavaScript. The default stroke colour is #000000 (solid black). To change the stroke colour, use the strokeStyle property.

Using the moveTo() method

The `moveTo()` method is used to move the path to a specified point on the canvas without creating a line. The function accepts two parameters: the x-axis (horizontal) coordinate of the point, and the y-axis (vertical) coordinate of the point.

Const canvas = document.getElementById("myCanvas");

Const ctx = canvas.getContext("2d");

// Start a new path

Ctx.beginPath();

// Move the path to the specified point

Ctx.moveTo(0, 0);

// Add a line to the path

Ctx.lineTo(300, 150);

// Draw the path

Ctx.stroke();

In this example, we first get a reference to the canvas element in the HTML document using `document.getElementById`();. We then use the `getContext()` method to get the 2D rendering context of the canvas, which provides methods for drawing on the canvas.

Next, we call the `beginPath()` method to start a new path. This is necessary because the `moveTo()` method does not create a new path by itself. After calling `moveTo(0, 0)`, the path is moved to the point (0, 0) on the canvas. We then add a line to the path using `lineTo(300, 150)`, which creates a line from the current point (0, 0) to the specified point (300, 150). Finally, we call the `stroke()` method to draw the path on the canvas.

The `moveTo()` method is useful for creating multiple sub-paths within a single path. For example:

Const canvas = document.getElementById("canvas");

Const ctx = canvas.getContext("2d");

Ctx.beginPath();

Ctx.moveTo(50, 50); // Begin first sub-path

Ctx.lineTo(200, 50);

Ctx.moveTo(50, 90); // Begin second sub-path

Ctx.lineTo(280, 120);

Ctx.stroke();

In this example, the first sub-path starts at (50, 50) and ends at (200, 50). The second sub-path starts at (50, 90) and ends at (280, 120). Both sub-paths are then rendered with a single call to the `stroke()` method.

Using the lineTo() method

The lineTo() method is used to add a line to the path of the HTML canvas element. This method is called after the moveTo() method to create a path that can be stroked or filled. The lineTo() method takes two arguments: the x and y coordinates of the endpoint of the line.

Javascript

Var c = document.getElementById("newCanvas");

Var ctx = c.getContext("2d");

Ctx.beginPath();

Ctx.moveTo(100, 200);

Ctx.lineTo(100, 100);

Ctx.lineTo(70, 100);

Ctx.strokeStyle = "blue";

Ctx.stroke();

In this example, we first get the canvas element with the id "newCanvas" and create a 2D context using the getContext() method. We then call the beginPath() method to start a new path. Next, we use the moveTo() method to move the cursor to the starting point of the path (100, 200). We then add two lines to the path using the lineTo() method, with the first line going from (100, 200) to (100, 100), and the second line going from (100, 100) to (70, 100). Finally, we set the stroke style to blue and call the stroke() method to draw the path on the canvas.

The lineTo() method is a powerful tool that allows you to create complex paths and shapes on the HTML canvas element. By combining it with other methods such as moveTo(), stroke(), and fill(), you can create a variety of drawings and graphics on your web page.

It is important to note that the lineTo() method only adds lines to the path and does not draw them on the canvas. The actual drawing happens when you call the stroke() or fill() method. Additionally, the lineTo() method does not take a colour or width as arguments. The colour and width of the lines are determined by the strokeStyle and lineWidth properties of the context, respectively.

Using the beginPath() method

The beginPath() method is used to start a new path or reset the current path. This method is called when you want to create a new path. It starts a new path by emptying the list of sub-paths. To create a new sub-path, you can use the moveTo() method.

Const canvas = document.getElementById("myCanvas");

Const ctx = canvas.getContext("2d");

Ctx.beginPath();

Ctx.moveTo(20, 20);

Ctx.lineTo(20, 100);

Ctx.lineTo(70, 100);

Ctx.strokeStyle = "red";

Ctx.stroke();

In this example, we first get the canvas element with the id "myCanvas" and then get the 2D context of the canvas. We then call the beginPath() method to start a new path. Next, we use the moveTo() method to move the path to the starting point (20, 20). We then add two lines to the path using the lineTo() method. Finally, we set the stroke style to red and call the stroke() method to draw the path on the canvas.

The beginPath() method is useful when you want to create multiple distinct paths on the canvas. For example, if you want to draw multiple shapes or lines with different colours, you can use the beginPath() method to start a new path for each shape or line.

Const canvas = document.getElementById("canvas");

Const ctx = canvas.getContext("2d");

// First path

Ctx.beginPath();

Ctx.strokeStyle = "blue";

Ctx.moveTo(20, 20);

Ctx.lineTo(200, 20);

Ctx.stroke();

// Second path

Ctx.beginPath();

Ctx.strokeStyle = "green";

Ctx.moveTo(20, 20);

Ctx.lineTo(120, 120);

Ctx.stroke();

In this example, the beginPath() method is called before beginning each line, so that they may be drawn with different colours.

Using the closePath() method

The closePath() method in HTML canvas is used to create a path from the current point back to the starting point of the current sub-path. If the shape has already been closed or has only one point, this function does nothing.

Const canvas = document.getElementById("myCanvas");

Const ctx = canvas.getContext("2d");

Ctx.beginPath();

Ctx.moveTo(20, 20);

Ctx.lineTo(20, 100);

Ctx.lineTo(70, 100);

Ctx.closePath();

Ctx.stroke();

In this example, we first get the canvas element with the ID "myCanvas". Then, we get the 2D context of the canvas using the getContext() method. Next, we start a new path with beginPath() and move the pen to the starting point (20, 20) using moveTo(). We add two lines to the path using lineTo(), creating an "L" shape. Then, we close the path with closePath(), which connects the current point (70, 100) back to the starting point (20, 20). Finally, we use the stroke() method to draw the path on the canvas.

You can also fill the closed path with a colour using the fill() method:

Const canvas = document.getElementById("myCanvas");

Const ctx = canvas.getContext("2d");

Ctx.beginPath();

Ctx.moveTo(20, 20);

Ctx.lineTo(20, 100);

Ctx.lineTo(70, 100);

Ctx.closePath();

Ctx.fillStyle = "red";

Ctx.fill();

In this example, we set the fill style to red using fillStyle = "red", and then fill the path using the fill() method.

The closePath() method is supported in all modern browsers and has been available since July 2015. It is a part of the Canvas 2D API and does not draw anything directly to the canvas. Instead, it is used in conjunction with the stroke() or fill() methods to render the path.

Using the strokeStyle property

The strokeStyle property is used to specify the colour, gradient or pattern of the stroke (outline) of a shape. The default stroke colour is #000000 (solid black).

Const canvas = document.getElementById("myCanvas");

Const ctx = canvas.getContext("2d");

Ctx.strokeStyle = "red";

Ctx.strokeRect(20, 20, 150, 100);

In this example, we first get the canvas element with the ID "myCanvas". Then, we get the 2D rendering context of the canvas using the getContext() method. Next, we set the stroke style to red using the strokeStyle property. Finally, we draw a rectangle with the top-left corner at (20, 20) and a width of 150 and a height of 100 using the strokeRect() method.

You can also use a gradient or pattern for the stroke style. Here is an example:

Const canvas = document.getElementById("myCanvas");

Const ctx = canvas.getContext("2d");

// Create a linear gradient from (0, 0) to (170, 0)

Const gradient = ctx.createLinearGradient(0, 0, 170, 0);

// Add colour stops to the gradient

Gradient.addColorStop("0", "magenta");

Gradient.addColorStop("0.5", "blue");

Gradient.addColorStop("1.0", "red");

// Set the stroke style to the gradient

Ctx.strokeStyle = gradient;

// Draw a rectangle with a gradient stroke

Ctx.strokeRect(20, 20, 150, 100);

In this example, we create a linear gradient using the createLinearGradient() method, specifying the starting and ending points of the gradient. We then add colour stops to the gradient using the addColorStop() method, specifying the position and colour for each stop. Finally, we set the stroke style to the gradient and draw a rectangle with a gradient stroke.

You can also use a pattern for the stroke style by creating a CanvasPattern object and setting it as the stroke style.

Frequently asked questions