Skip to content

Commit 224c7f1

Browse files
adding get and set transformexample
1 parent 2b87e19 commit 224c7f1

File tree

1 file changed

+33
-0
lines changed

1 file changed

+33
-0
lines changed
Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>2D canvas getTransform() and setTransform example</title>
6+
<style>
7+
canvas {
8+
border: 1px solid black;
9+
}
10+
</style>
11+
</head>
12+
<body>
13+
<canvas></canvas>
14+
<canvas></canvas>
15+
16+
<script>
17+
const canvases = document.querySelectorAll('canvas');
18+
const ctx1 = canvases[0].getContext('2d');
19+
const ctx2 = canvases[1].getContext('2d');
20+
21+
ctx1.setTransform(1, .2, .8, 1, 0, 0);
22+
ctx1.fillRect(25, 25, 50, 50);
23+
24+
let storedTransform = ctx1.getTransform();
25+
console.log(storedTransform);
26+
27+
ctx2.setTransform(storedTransform);
28+
ctx2.beginPath();
29+
ctx2.arc(50, 50, 50, 0, 2 * Math.PI);
30+
ctx2.fill();
31+
</script>
32+
</body>
33+
</html>

0 commit comments

Comments
 (0)