Menu
To rotate a shape around its own center, you must first translate the canvas to the center of the shape, then rotate the canvas, then translate the canvas back to 0,0, and then draw the shape. This example first translates (moves) the center of the canvas to the center of the square (cx, cy).
Rotating a shape around its center To do this, the following steps are applied to the matrix: First, translate() moves the matrix's origin to the shape's center. rotate() rotates the matrix by the desired amount. Finally, translate() moves the matrix's origin back to its starting point.
Sounds like you want to rotate the rect around its centerpoint.
Red rectangle is original, Yellow rectangle is rotated around the centerpoint.
To do that you need to first context.translate to the rect's centerpoint before rotating.
// move the rotation point to the center of the rect
ctx.translate( x+width/2, y+height/2 );
// rotate the rect
ctx.rotate(degrees*Math.PI/180);
Note that the context is now in its rotated state.
That means drawing position [0,0] is visually at [ x+width/2, y+height/2 ].
So you must draw the rotated rect at [ -width/2, -height/2 ] (not at the original unrotated x/y).
// draw the rect on the transformed context
// Note: after transforming [0,0] is visually [-width/2, -height/2]
// so the rect needs to be offset accordingly when drawn
ctx.rect( -width/2, -height/2, width,height);
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/z4p3n/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var startX=50;
var startY=80;
// draw an unrotated reference rect
ctx.beginPath();
ctx.rect(startX,startY,100,20);
ctx.fillStyle="blue";
ctx.fill();
// draw a rotated rect
drawRotatedRect(startX,startY,100,20,45);
function drawRotatedRect(x,y,width,height,degrees){
// first save the untranslated/unrotated context
ctx.save();
ctx.beginPath();
// move the rotation point to the center of the rect
ctx.translate( x+width/2, y+height/2 );
// rotate the rect
ctx.rotate(degrees*Math.PI/180);
// draw the rect on the transformed context
// Note: after transforming [0,0] is visually [x,y]
// so the rect needs to be offset accordingly when drawn
ctx.rect( -width/2, -height/2, width,height);
ctx.fillStyle="gold";
ctx.fill();
// restore the context to its untranslated/unrotated state
ctx.restore();
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
You can use a simple function to do this as an alternative to translate and rotate:
This function will let you draw a line starting at x and y, and end at length at angle:
function lineToAngle(ctx, x1, y1, length, angle) {
angle *= Math.PI / 180;
var x2 = x1 + length * Math.cos(angle),
y2 = y1 + length * Math.sin(angle);
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
return {x: x2, y: y2};
}
Usage:
lineToAngle(ctx, x, y, length, angle);
var canvas = document.querySelector('canvas'),
ctx = canvas.getContext('2d'),
x = 100, y =50, length = 40, angle = 0, dlt = -2;
(function animate() {
//clear
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
lineToAngle(ctx, x, y, length, angle);
ctx.lineWidth = 10;
ctx.stroke();
angle += dlt;
if (angle < -90 || angle > 0) dlt = -dlt;
requestAnimationFrame(animate);
})();
function lineToAngle(ctx, x1, y1, length, angle) {
angle *= Math.PI / 180;
var x2 = x1 + length * Math.cos(angle),
y2 = y1 + length * Math.sin(angle);
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
return {x: x2, y: y2};
}body {background-color:#555557}
canvas {background:#ddd;border:1px solid #000}<canvas></canvas>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With