Olá,
Estou tentando centralizar a cabeça do creeper no canvas, mas quando coloco as coordenadas fica torto!
Eu vi que o canvas tem que ter 600 de largura e 400 de altura, como a cabeça tem 350 de largura e 300 de altura eu pensei:
Pra centralizar no eixo x eu subtaio 350 de 600 e divido por 2, o resultado é: 125.
Pro eixo y eu subtrai 300 de 400 e dividi por 2, o resultado foi: 50.
Então no meu código ficou assim:
<canvas height="400" width="600"></canvas>
<script>
let tela = document.querySelector("canvas");
let pincel = tela.getContext("2d");
pincel.fillStyle = "lightgrey";
pincel.fillRect(0, 0, 600, 400);
pincel.fillStyle = "darkgreen";
/*inicia em x=125 e termina em x=475 (125+350), inicia em y=50 e termina em y=350 (50+350)*/
pincel.fillRect(125, 50, 475 ,350);
</script>
Tem algum erro no código ou estou ficando louco? haha