geoffb · February 23, 2023 20:56 · MartinJaskulla · Feb 3, 2022
diff --git a/simple-canvas-rotation.html b/simple-canvas-rotation.html
 <!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 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>
	<!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 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>