HTML Canvas stroke() Method: Stroking Paths

Table of Contents

HTML Canvas `stroke()` Method: Stroking Paths

The stroke() method in the HTML Canvas API is used to outline the current path with a specified stroke style. This method is fundamental for drawing shapes and creating visual effects by outlining, rather than filling, paths. Understanding how to use stroke() effectively is crucial for creating graphics with clean, defined edges and borders.

What is the `stroke()` Method?

The stroke() method renders the outline of the path currently defined on the canvas. This path is built using methods like beginPath(), moveTo(), lineTo(), arc(), and other path-related methods. When stroke() is called, it applies the current stroke style to the path, making it visible.

Purpose of the `stroke()` Method

The primary purpose of stroke() is to:

Outline shapes and paths with a visible stroke.
Define the edges of figures, making them stand out.
Apply different stroke styles, such as colors and line widths, to customize the look of paths.
Create visual effects by using stroked paths in combination with filled shapes.

Syntax of the `stroke()` Method

The stroke() method does not take any parameters. It simply applies the current stroke style to the current path.

ctx.stroke();

Where ctx is the 2D rendering context of an HTML canvas element.

Examples of the `stroke()` Method

Let's explore various examples of how to use the stroke() method to create different visual effects.

Basic Path Stroking

This example demonstrates how to create a simple stroked rectangle:

<canvas
  id="canvasStrokeBasic"
  width="200"
  height="150"
  style="border: 1px solid black;"
></canvas>

<script>
//<![CDATA[

  const canvas_basic = document.getElementById("canvasStrokeBasic");
  const ctx_basic = canvas_basic.getContext("2d");

  ctx_basic.beginPath();
  ctx_basic.rect(20, 20, 100, 80);
  ctx_basic.strokeStyle = "blue";
  ctx_basic.lineWidth = 3;
  ctx_basic.stroke();

//]]]]><![CDATA[>
</script>

In this example, we use rect() to define a rectangular path and stroke() to draw its outline with a blue color and a line width of 3 pixels.

Stroking a Circle

Here's how to stroke a circle:

<canvas
  id="canvasStrokeCircle"
  width="150"
  height="150"
  style="border: 1px solid black;"
></canvas>

<script>
//<![CDATA[

  const canvas_circle = document.getElementById("canvasStrokeCircle");
  const ctx_circle = canvas_circle.getContext("2d");

  ctx_circle.beginPath();
  ctx_circle.arc(75, 75, 50, 0, 2 * Math.PI);
  ctx_circle.strokeStyle = "green";
  ctx_circle.lineWidth = 4;
  ctx_circle.stroke();

//]]]]><![CDATA[>
</script>

This example demonstrates stroking a circle using arc() to create a circular path, strokeStyle to set stroke color to green, lineWidth to define the thickness, and stroke() to render the outline.

Stroking a Custom Shape

Let's create a more complex shape using multiple lines:

<canvas
  id="canvasStrokeCustom"
  width="200"
  height="150"
  style="border: 1px solid black;"
></canvas>

<script>
//<![CDATA[

  const canvas_custom = document.getElementById("canvasStrokeCustom");
  const ctx_custom = canvas_custom.getContext("2d");

  ctx_custom.beginPath();
  ctx_custom.moveTo(50, 20);
  ctx_custom.lineTo(150, 60);
  ctx_custom.lineTo(50, 100);
  ctx_custom.lineTo(100, 60);
  ctx_custom.closePath();
  ctx_custom.strokeStyle = "purple";
  ctx_custom.lineWidth = 2;
  ctx_custom.stroke();

//]]]]><![CDATA[>
</script>

This demonstrates creating a custom shape using moveTo() and lineTo(), closePath() closes the shape by connecting the last point back to the first, and finally applying a purple stroke with a line width of 2.

Stroking with Different Line Widths

Here’s an example of using different line widths for strokes:

<canvas
  id="canvasStrokeWidth"
  width="250"
  height="200"
  style="border: 1px solid black;"
></canvas>

<script>
//<![CDATA[

  const canvas_width = document.getElementById("canvasStrokeWidth");
  const ctx_width = canvas_width.getContext("2d");
  const x = 20;
  const y = 20;

  ctx_width.strokeStyle = "red";
  ctx_width.beginPath();
  ctx_width.lineWidth = 1;
  ctx_width.rect(x, y, 70, 70);
  ctx_width.stroke();

  ctx_width.beginPath();
  ctx_width.lineWidth = 5;
  ctx_width.rect(x + 90, y, 70, 70);
  ctx_width.stroke();

  ctx_width.beginPath();
  ctx_width.lineWidth = 10;
  ctx_width.rect(x + 180, y, 70, 70);
  ctx_width.stroke();

//]]]]><![CDATA[>
</script>

This example illustrates how setting the lineWidth before calling stroke() will change the appearance of the outlines. Each rectangle has different line widths of 1, 5 and 10 pixels respectively.

Stroking with save() and restore()

Use save() and restore() to manage canvas states:

<canvas
  id="canvasStrokeSave"
  width="200"
  height="200"
  style="border: 1px solid black;"
></canvas>

<script>
//<![CDATA[

  const canvas_save = document.getElementById("canvasStrokeSave");
  const ctx_save = canvas_save.getContext("2d");

  ctx_save.beginPath();
  ctx_save.rect(20, 20, 100, 80);
  ctx_save.strokeStyle = "green";
  ctx_save.lineWidth = 3;
  ctx_save.stroke();

  ctx_save.save();

  ctx_save.strokeStyle = "red";
  ctx_save.lineWidth = 5;
  ctx_save.beginPath();
  ctx_save.rect(50, 50, 100, 80);
  ctx_save.stroke();

  ctx_save.restore();

  ctx_save.beginPath();
  ctx_save.rect(80, 80, 100, 80);
  ctx_save.stroke();

//]]]]><![CDATA[>
</script>

This example uses save() to store the current context state before modifying the stroke style and then uses restore() to revert to the saved state before stroking the last rectangle with green color and width 3.

Tips and Best Practices

Always begin a new path: Use beginPath() to start a new path. Otherwise, the stroke method will apply to all previous paths as well.
Set stroke style before stroking: Ensure that the strokeStyle and lineWidth properties are set before calling the stroke() method to achieve the desired appearance.
Use closePath() where needed: If you want a closed path to be stroked correctly, remember to call closePath() before calling stroke().
Manage canvas states: When changing context properties, use save() and restore() to keep your code clean and prevent unexpected results.
Optimize for performance: For complex paths, consider simplifying the shapes or optimizing the drawing algorithm to improve rendering performance.

Browser Support

The stroke() method is widely supported across all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera, as well as on mobile browsers.

Conclusion

The stroke() method is a cornerstone of the HTML Canvas API, enabling you to create outlines of various shapes and paths. By understanding how to use it effectively, you can add depth and definition to your canvas graphics. Experiment with different stroke styles and combinations to produce various appealing visual effects and designs.