HTML Canvas - scrollPathIntoView() Method

The HTML Canvas scrollPathIntoView() method takes the CanvasRenderingContext2D interface context object and scrolls the path given into view.

Syntax

Following is the syntax of HTML Canvas scrollPathIntoView() method −

CanvasRenderingContext2D.scrollPathIntoView(cur_path);

Parameters

Following is the list of parameters of this method −

S.No	Parameter & Description
1	cur_path The path to which the method is to be applied.

Return Value

When the following method is applied to the CanvasRenderingContext2D interface context object, the path of the object is made available in the view.

Example 1

The following example demonstrates how the HTML Canvas scrollPathIntoView() method is used inside the Canvas element.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body onload="Context();">
   <canvas id="canvas" width="200" height="200" style="border: 1px solid black;"></canvas>
   <script>
      function Context() {
         var canvas = document.getElementById("canvas");
         var context = canvas.getContext("2d");
         context.beginPath();
         context.moveTo(100, 50);
         context.lineTo(50, 100);
         context.lineTo(150, 100);
         context.lineTo(100, 50);
         context.fillStyle = 'brown';
         context.fill();
         context.closePath();
         context.strokeRect(30, 30, 150, 100);
         context.scrollPathIntoView();
      }
   </script>
</body>
</html>

Output

The output returned by the above code on the webpage as −

Example 2

The following example demonstrates how the scrollPathIntoView() method hides the shape drawn inside the Canvas element when it has bigger boundaries than the original canvas element.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="300" height="200" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.beginPath();
      // remove the below line to observe the difference
      context.scrollPathIntoView();
      context.strokeRect(30, 30, 350, 200);
   </script>
</body>
</html>

Output

The output returned by the above code on the webpage as −

html_canvas_paths.htm