Code
Execute
<!DOCTYPE html> <html> <head> <title>wikitechy-transform()in canvas</title> </head> <body> <h1>wikitechy-transform() in canvas</h1> <canvas id="wikitechyCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> </canvas> <script> var canvas = document.getElementById("wikitechyCanvas"); var context = canvas.getContext("2d"); context.fillStyle = "purple"; context.fillRect(0, 0, 250, 200); context.transform(1, 0.5, -0.5, 1, 30, 10); context.fillStyle = "pink"; context.fillRect(0, 0, 250, 200); context.transform(1, 0.5, -0.5, 1, 30, 10); context.fillStyle = "green"; context.fillRect(0, 0, 250, 100); </script> </body> </html>
Result
