El tamaño predeterminado de un canvas es de 300×150 píxeles.

Es importante entender que definir los atributos width y height directamente en la etiqueta canvas es diferente a establecerlos mediante CSS. Los atributos width y height en la etiqueta canvas representan el tamaño real del lienzo donde se dibujan los gráficos. Por otro lado, las propiedades width y height en CSS controlan cómo el canvas se muestra en el navegador. Si no se especificna los atributos width y height o si tienen valores incorrectos, se utilizan los valores predeterminados (300px de ancho y 150px de alto).

Cuando queremos cambiar el tamaño del lienzo, a menudo recurremos a métodos que pueden no funcionar como esperamos:

// Método 1: Estilo en línea
<canvas style="width:450px;height:300px;"></canvas>

// Método 2: Estilo interno
<style type="text/css">
#miCanvas {
  width: 450px;
  height: 300px;
}
</style>
...
<canvas id="miCanvas"></canvas>

// Método 3: Estilo externo
// archivo canvas.css
#miCanvas {
  width: 450px;
  height: 300px;
}
// En HTML
<link rel="stylesheet" href="canvas.css" />
...
<canvas id="miCanvas"></canvas>

Sin embargo, al ejecutar este código, no obtenemos el resultado esperado. Por ejemplo:

<style type="text/css" media="screen">
#miCanvas {
  background-color: #ccc;
  width: 450px;
  height: 300px;
}
</style>
<canvas id="miCanvas"></canvas>
<script>
var contexto = document.getElementById("miCanvas").getContext("2d");
contexto.fillStyle = "red";
contexto.fillRect(0,0,100,100);
</script>

Podríamos esperar ver un cuadrado rojo en el lienzo, pero la realidad es diferente. La figura resultante no es un cuadrado, sino un rectángulo.

Esto se debe a que el uso de CSS para establecer el tamaño del canvas provoca que el lienzo se escalé proporcionalmente según los valores especificados (CSS solo controla el tamaño de visualización en pantalla).

En el ejemplo anterior, el CSS establece un ancho de 450px y un alto de 300px, correspondientes al tamaño predeterminado del canvas de 300×150. Las proporciones de ancho y alto son 1.5 y 2 respectivamente. Por lo tanto, el rectángulo que dibujamos con dimensiones de 100px × 100px se mostrará como: ancho: 100px × 1.5 = 150px; alto: 100px × 2 = 200px.

¿Cómo cambiar correctamente el tamaño predeterminado del canvas?

// Método 1: Atributos directos
<canvas width="450" height="350"></canvas>

// Método 2: Mediante JavaScript
<canvas id="miCanvas"></canvas>
<script>
    var elemento = document.getElementById("miCanvas");
    elemento.width = 450; // Nota: sin unidades
    elemento.height = 300; // Nota: sin unidades
    var contexto = elemento.getContext("2d");
    contexto.fillStyle = "red";
    contexto.fillRect(0,0,100,100);
</script>

Con esta configuración, aparecerá en el lienzo un cuadrado con lados de 100px.

Es importante tener en cuenta que al cambiar el tamaño del canvas, los estilos se restablecen.

Para obtener el contexto del canvas, se utiliza el método getContext del elemento canvas. Es importante recordar que getContext es un método de objetos DOM, es decir, un método nativo de JavaScript, y no puede obtenerse directamente de un objeto jQuery.