Instantly share code, notes, and snippets.

Embed
What would you like to do?
A simple example of rotating a rectangle using HTML5 canvas.
<!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>
@smoriarty21

This comment has been minimized.

smoriarty21 commented Jul 24, 2016

Thanks for this example! I was having tons of trouble figuring out why my rectangle was not rotating in place and it was because no other guide I read mentioned that you need to keep in mind that you ran a transform on the context and you need to adjust to draw for the new context. Hour of confusion solved by reading your comments. Keep up the good work!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment