Last active
February 23, 2023 20:56
Revisions
-
geoffb revised this gist
Aug 30, 2013 . 1 changed file with 45 additions and 45 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -5,51 +5,51 @@ </head> <body> <script> // Create our canvas and append it to the document body var stage = document.createElement("canvas"); stage.width = 320; stage.height = 240; document.body.appendChild(stage); // Grab a reference to the canvas' 2D context var ctx = stage.getContext("2d"); // Paint a background color ctx.fillStyle = "cornflowerblue"; ctx.fillRect(0, 0, stage.width, stage.height); // Draw a non-transformed red rectangle on the left ctx.fillStyle = "red"; ctx.fillRect(40, 80, 80, 80); // Now, let's draw a rotated yellow rectangle on the right // First, let's save our canvas context in order to easily restore // it after our transformations ctx.save(); // Next, we'll translate (move the origin) to the center // of where we'll be drawing the rectangle ctx.translate(240, 120); // Any transformations applied from here on out will be // relative to the origin of 240, 120 // Note that we're using radians, not degrees to specify rotation ctx.rotate(Math.PI / 4); // 45 degrees // If we desired to scale the rectangle as well, we'd do that here: // ctx.scale(1.5, 1.5); // 1.5x normal size on both the x and y axis // Now we're ready to draw our rectangle // The diffence this time is that our coordinates are relative // to the origin, just like the .rotate call ctx.fillStyle = "yellow"; ctx.fillRect(-40, -40, 80, 80); // Finally, we restore our canvas context so that subsquent draws // are not transformed ctx.restore(); </script> </body> </html> -
geoffb created this gist
Aug 30, 2013 .There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,55 @@ <!DOCTYPE html> <html> <head> <title>HTML5 Canvas Transformation</title> </head> <body> <script> // Create our canvas and append it to the document body var stage = document.createElement("canvas"); stage.width = 320; stage.height = 240; document.body.appendChild(stage); // Grab a reference to the canvas' 2D context var ctx = stage.getContext("2d"); // Paint a background color ctx.fillStyle = "cornflowerblue"; ctx.fillRect(0, 0, stage.width, stage.height); // Draw an non-transformed red rectangle on the left ctx.fillStyle = "red"; ctx.fillRect(40, 80, 80, 80); // Now, let's draw a rotated yellow rectangle on the right // First, let's save our canvas context in order to easily restore // it after our transformations ctx.save(); // Next, we'll translate (move the origin) to the center // of where we'll be drawing the rectangle ctx.translate(240, 120); // Any transformations applied from here on out will be // relative to the origin of 240, 120 // Note that we're using radians, not degrees to specify rotation ctx.rotate(Math.PI / 4); // 45 degrees // If we desired to scale the rectangle as well, we'd do that here: // ctx.scale(1.5, 1.5); // 1.5x normal size on both the x and y axis // Now we're ready to draw our rectangle // The diffence this time is that our coordinates are relative // to the origin, just like the .rotate call ctx.fillStyle = "yellow"; ctx.fillRect(-40, -40, 80, 80); // Finally, we restore our canvas context so that subsquent draws // are not transformed ctx.restore(); </script> </body> </html>