I have the following web page:
var box_x = 30;
var box_y = 30;
var box_width = 30;
var box_height = 30;
var box_direction = 20; // Degrees clockwise
function draw_box() {
var c = document.getElementById("area");
var ctx = c.getContext("2d");
ctx.clearRect(0, 0, 500, 500);
ctx.rotate(box_direction * Math.PI / 180);
ctx.fillRect(box_x, box_y, 100, 50);
box_x += 2;
}
setInterval(draw_box, 1000);<h1>Welcome</h1>
<canvas id="area" width="500px" height="500px" style="border: 1px solid #0000aa" />
</canvas>Why is the box not just moving to the right?
ctx.rotate rotates the entire canvas from the top left corner, so you should first use ctx.translate to move the top left corner to the pivot (which is the box's top left corner) and then do the same but in reverse so you reset the rotation and translation of the canvas
var box_x = 30;
var box_y = 30;
var box_width = 30;
var box_height = 30;
var box_direction = 20; // Degrees clockwise
function draw_box() {
var c = document.getElementById("area");
var ctx = c.getContext("2d");
ctx.clearRect(0, 0, 500, 500);
ctx.translate(box_x, box_y);
ctx.rotate(box_direction * Math.PI / 180);
ctx.fillRect(0, 0, 100, 50);
ctx.rotate(-box_direction * Math.PI / 180);
ctx.translate(-box_x, -box_y);
box_x += 2;
}
setInterval(draw_box, 1000);<h1>Welcome</h1>
<canvas id="area" width="500px" height="500px" style="border: 1px solid #0000aa" />
</canvas>Because you have ctx.rotate(box_direction * Math.PI / 180);. This is rotating with the box.
<html>
<head>
<title>Rectangles wandering around aminlessly</title>
</head>
<body
<h1>Welcome</h1>
<canvas id="area" width="500px" height="500px" style="border: 1px solid #0000aa"/>
</canvas>
<script lang="javascript">
var box_x = 30;
var box_y = 30;
var box_width = 30;
var box_height = 30;
var box_direction = 20; // Degrees clockwise
function draw_box() {
var c = document.getElementById("area");
var ctx = c.getContext("2d");
ctx.clearRect(0, 0, 500, 500);
ctx.fillRect(box_x, box_y, 100, 50);
box_x += 2;
}
setInterval(draw_box, 1000);
</script>
</body>