I need to rotate an image or in this case a square around its center using canvas. If its at point (10,16) and I rotate the square 180 degrees I need that square to stay at (10,16) while facing downwards. The methods of which I have tried are in the attached code.
const canvas = document.getElementById("canvas")
const ctx = canvas.getContext("2d")
const size = 50
const pos = canvas.width/4
let rotateAmount = 0;
const tests = [
// Test 1
(rotation)=>{
ctx.translate(pos/2+size, pos/2+size)
ctx.rotate(Math.PI / 180 * rotation)
ctx.fillRect(pos, pos, size, size)
},
// Test 2
(rotation)=>{
ctx.translate(size/2+pos, size/2+pos)
ctx.rotate(Math.PI / 180 * rotation)
ctx.fillRect(pos, pos, size, size)
},
// Test 3
(rotation)=>{
ctx.translate(pos/2, pos/2)
ctx.rotate(Math.PI / 180 * rotation)
ctx.fillRect(pos, pos, size, size)
},
// Test 4
(rotation)=>{
ctx.translate(size/2, size/2)
ctx.rotate(Math.PI / 180 * rotation)
ctx.fillRect(pos, pos, size, size)
},
// Test 5
(rotation)=>{
ctx.translate(pos + 0.5 * size, pos + 0.5 * size)
ctx.rotate(Math.PI / 180 * rotation)
ctx.fillRect(pos, pos, size, size)
}
]
window.onmousemove = (mouse) => {
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, canvas.width, canvas.height)
rotateAmount++
tests[document.getElementById("testMethod").value](rotateAmount)
}canvas{
border-color: violet;
border-style: solid;
border-width: 5px;
}<p>
Move your mouse to rotate the square
</p>
<p>
Select your test method via the dropdown
</p>
<select id="testMethod">
<option value="0">Test 1</option>
<option value="1">Test 2</option>
<option value="2">Test 3</option>
<option value="3">Test 4</option>
<option value="4">Test 5</option>
</select>
<button onclick="rotateAmount = 0">Reset Rotation</button>
<br>
<canvas id="canvas" width="250" height="250"></canvas>Found the answer to this while reviewing my question! It turns out you must translate back after rotating. The correct test is test 2 as it divides the size by 2 (so you are in the center of the square) and then adds the position (so you are at the square). Below is a working example with the retranslation.
const canvas = document.getElementById("canvas")
const ctx = canvas.getContext("2d")
const size = 50
const pos = canvas.width/4
let rotateAmount = 0;
const tests = [
// Test 0
(rotation)=>{
ctx.translate(size/2+pos, size/2+pos)
ctx.rotate(Math.PI / 180 * rotation)
ctx.translate(-size/2-pos, -size/2-pos)// Added Line
ctx.fillRect(pos, pos, size, size)
}
]
window.onmousemove = (mouse) => {
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, canvas.width, canvas.height)
rotateAmount++
tests[document.getElementById("testMethod").value](rotateAmount)
}canvas{
border-color: violet;
border-style: solid;
border-width: 5px;
}<p>
Move your mouse to rotate the square
</p>
<p>
Select your test method via the dropdown
</p>
<select id="testMethod">
<option value="0">Test</option>
</select>
<button onclick="rotateAmount = 0">Reset Rotation</button>
<br>
<canvas id="canvas" width="250" height="250"></canvas>