| <style> |
| canvas { |
| width: 100px; |
| height: 100px; |
| } |
| </style> |
| <body> |
| <canvas id="canvas1"></canvas> |
| <canvas id="canvas2"></canvas> |
| <script> |
| function drawRectWithSetTransform(id, transform) { |
| const canvas = document.getElementById(id); |
| canvas.width = canvas.clientWidth; |
| canvas.height = canvas.clientHeight; |
| |
| const ctx = canvas.getContext('2d'); |
| ctx.fillStyle = 'green'; |
| ctx.setTransform(transform); |
| ctx.fillRect(0, 0, 50, 50); |
| } |
| |
| drawRectWithSetTransform('canvas1', { a: 2, d: 2 }); |
| drawRectWithSetTransform('canvas2', { m11: 2, m22: 2 }); |
| </script> |
| </body> |
