3

let canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 50, 50);
#canvas {
    width: 500px;
    height: 500px;
    background: red;
}
<canvas id="canvas"></canvas>

No código acima eu possuo um <canvas> de 500px x 500px e nele um quadrado de 50px x 50px, mas o que acontece é que o quadrado está maior do que deveria e está distorcido porque isso está acontecendo e como corrigir?

1 Resposta 1

1

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.

8
  • Mas como eu faria para deixar na largura e altura especificada na pergunta, sem ser o padrão? 18/04/2020 às 16:48
  • Conforme eu disse, via HTML (especificando os atributos width e height) ou JavaScript (função mudarAtributos()). Exemplo de html: <canvas id="canvas" width="500" height="500"> 18/04/2020 às 16:50
  • Mas não está funcionando com os tamanhos citados. 18/04/2020 às 16:54
  • Modifiquei o Snippet. Se você executar, ele começará 500x500 corretamente, qual o problema no seu caso? Você removeu o CSS que modifica a altura e largura? 18/04/2020 às 16:56
  • Agora funcionou muito, obrigada! :) 18/04/2020 às 19:29

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .