Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.mozilla.org/en-US/docs/Web/API/Path2D/addPath below:

Path2D: addPath() method - Web APIs

Baseline Widely available

Note: This feature is available in Web Workers.

The Path2D.addPath() method of the Canvas 2D API adds one Path2D object to another Path2D object.

addPath(path)
addPath(path, transform)

path

A Path2D path to add.

transform Optional

A DOMMatrix to be used as the transformation matrix for the path that is added. (Technically an object that possesses the same properties as a DOMMatrix object.)

None (undefined).

This example adds one path to another.

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

First, we create two separate Path2D objects, each of which contains a rectangle made using the rect() method. We then create a matrix using DOMMatrix(). We then add the second path to the first using addPath(), also applying the matrix to move the second path to the right. Finally, we draw the first path (which now contains both rectangles) using fill().

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

// Create first path and add a rectangle
let p1 = new Path2D();
p1.rect(0, 0, 100, 150);

// Create second path and add a rectangle
let p2 = new Path2D();
p2.rect(0, 0, 100, 75);

// Create transformation matrix that moves 200 points to the right
let m = new DOMMatrix();
m.a = 1;
m.b = 0;
m.c = 0;
m.d = 1;
m.e = 200;
m.f = 0;

// Add second path to the first path
p1.addPath(p2, m);

// Draw the first path
ctx.fill(p1);

• The interface defining this method: Path2D

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.3