I am currently building a canvas game. I currently have an issue with setting up players. What im trying to do is basically rotate them around an origin. I can place players, but i am not able to rotate them
My current code is
addEventListener("DOMContentLoaded",()=>{
const canvas = document.getElementById("canvas")
var h = window.innerHeight
var w = window.innerWidth
var playerCircleSize = 40
canvas.height = h
canvas.width = w
console.log(h,w)
function rad(degree){
return degree * (Math.PI / 180)
}
function render(){
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#6e955e";
ctx.fillRect(0, 0, canvas.width, canvas.height);
function player(position){
function arc(tr1,tr2,size,fillst){
this.draw = function(){
ctx.beginPath();
ctx.save()
ctx.translate(tr1,tr2)
ctx.rotate(rad(position.rot))
ctx.arc(0,0,size, 0, 2 * Math.PI);
ctx.fillStyle=fillst
ctx.fill()
ctx.restore()
}
}
var body = new arc(position.x, position.y,playerCircleSize,"#ffc266")
var hand1 = new arc(position.x-(playerCircleSize/1.5), position.y-(playerCircleSize/1.4),playerCircleSize/3,"#ffb84d")
var hand2 = new arc(position.x-(playerCircleSize/-1.5), position.y-(playerCircleSize/1.4),playerCircleSize/3,"#ffb84d")
hand1.draw()
hand2.draw()
body.draw()
}
player({
x: w/2 - (playerCircleSize/2),
y: h/2 - (playerCircleSize/2),
rot: 90
})
player({
x: 150,
y: 300,
rot: 45
})
}
render()
window.addEventListener("resize", ()=>{
h = window.innerHeight
w = window.innerWidth
canvas.height = h
canvas.width = w
console.log(h,w)
render()
});
})
I tried to rotate every element individually, but that didnt work. I am expecting the result to look like this