Esse problema acontece porque, conforme especificações do <canvas>
:
O elemento canvas tem dois atributos para controlar o tamanho do
bitmap do elemento: width
e height
. Esses atributos, quando
especificados, devem ter valores que são números inteiros não
negativos válidos. As regras para analisar números inteiros não
negativos devem ser usadas para obter seus valores numéricos. Se um
atributo estiver ausente ou se a análise de seu valor retornar um
erro, o valor padrão deverá ser usado. O atributo width
é padronizado
em 300 e o atributo height
é padronizado em 150.
No seu caso, é como se estivesse pegando o canvas 300x150
e esticando para ficar 500x500
. Você pode ver isso "na prática" clicando no botão do exemplo abaixo (Mudar CSS).
Para o seu código funcionar corretamente, bastaria especificar os atributos height
e width
no HTML ou via JS (Mudar atributos).
let canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 50, 50);
function mudarCss() {
canvas.style.height = "500px";
canvas.style.width = "500px";
}
function mudarAtributos() {
canvas.style.height = "";
canvas.style.width = "";
canvas.setAttribute('height', '100');
canvas.setAttribute('width', '200');
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 50, 50);
}
#canvas {
background-color: red;
}
<div>
<button onClick="mudarCss()">Mudar CSS</button>
<button onClick="mudarAtributos()">Mudar atributos</button>
</div>
<canvas id="canvas" width="500" height="500">
Note que se você modificar isso via JavaScript, é necessário "redesenhar" o que estava no <canvas>
. O Motivo pode ser encontrado nas próprias especificações, estou adaptando abaixo:
Sempre que os atributos de conteúdo de largura e altura são definidos,
removidos, alterados ou redundantemente com o valor que eles já
possuem, o agente do usuário deve executar a ação correspondente:
2d Siga as etapas para definir as dimensões do bitmap com os valores numéricos dos atributos de conteúdo de largura e altura.
E o passo 1 dessas etapas de definição das dimensões do bitmap é:
Redefina o contexto de renderização para seu estado padrão.
E essa redefinição, por definição significa:
Quando o agente do usuário deve redefinir o contexto de renderização para seu estado padrão, deve limpar a pilha de estados de desenho e tudo o que esse estado de desenho consiste nos valores iniciais.