CanvasRenderingContext2D: scrollPathIntoView() method

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The CanvasRenderingContext2D.scrollPathIntoView() method of the Canvas 2D API scrolls the current or given path into view. It is similar to Element.scrollIntoView().

Syntax

scrollPathIntoView()
scrollPathIntoView(path)

Parameters

path: A Path2D path to use.

Return value

None (undefined).

Examples

Using the scrollPathIntoView method

This example demonstrates the scrollPathIntoView() method.

HTML

html

<canvas id="canvas"></canvas>

JavaScript

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.fillRect(10, 10, 30, 30);
ctx.scrollPathIntoView();

Editable demo

Edit the code below to see your changes update live in the canvas:

<canvas id="canvas" width="400" height="200" class="playable-canvas">
  <input id="button" type="range" min="1" max="12" />
</canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.beginPath();
ctx.rect(10, 10, 30, 30);
ctx.fill();
if (ctx.scrollPathIntoView) {
  ctx.scrollPathIntoView();
} else {
  ctx.fillText("Your browser does not support 'scrollPathIntoView()'.", 0, 150);
}
</textarea>

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const textarea = document.getElementById("code");
const reset = document.getElementById("reset");
const edit = document.getElementById("edit");
const code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", () => {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", () => {
  textarea.focus();
});

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);

Specifications

Specification
HTML Standard # dom-context-2d-scrollpathintoview-dev

Browser compatibility

BCD tables only load in the browser