1
resposta

Erro de centralização através das coordenadas

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

1 resposta

Olá Murilo, tudo certo ?

O problema na hora de desenhar está nesta linha de código:

pincel.fillRect(125, 50, 475 ,350);

Os dois primeiros valores são os valores iniciais de x e y. Até aí você está certo. Mas os outros dois valores são referentes a largura e altura do retângulo que deseja desenhar e não da posição final de x e y. Então o correto seria:

pincel.fillRect(125, 50, 350 ,300);

Espero ter ajudado, bons estudos!