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

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

CanvasRenderingContext2D: resetTransform() method - Web APIs

Baseline Widely available

The CanvasRenderingContext2D.resetTransform() method of the Canvas 2D API resets the current transform to the identity matrix.

This example draws a rotated rectangle after modifying the matrix, and then resets the matrix using the resetTransform() method.

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

The rotate() method rotates the transformation matrix by 45°. The fillRect() method draws a filled rectangle, adjusted according to that matrix.

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

// Draw a rotated rectangle
ctx.rotate((45 * Math.PI) / 180);
ctx.fillRect(60, 0, 100, 30);

// Reset transformation matrix to the identity matrix
ctx.resetTransform();

Whenever you're done drawing transformed shapes, you should call resetTransform() before rendering anything else. In this example, the first two shapes are drawn with a skew transformation, and the last two are drawn with the identity (regular) transformation.

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

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

// Skewed rectangles
ctx.transform(1, 0, 1.7, 1, 0, 0);
ctx.fillStyle = "gray";
ctx.fillRect(40, 40, 50, 20);
ctx.fillRect(40, 90, 50, 20);

// Non-skewed rectangles
ctx.resetTransform();
ctx.fillStyle = "red";
ctx.fillRect(40, 40, 50, 20);
ctx.fillRect(40, 90, 50, 20);

The skewed rectangles are gray, and the non-skewed rectangles are red.

You can also use the setTransform() method to reset the current transform to the identity matrix, like so:

ctx.setTransform(1, 0, 0, 1, 0, 0);

• The interface defining this method: CanvasRenderingContext2D

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