Rectángulo en HTML5 El lienzo está estirado

Question

Estoy trabajando en un sitio web y trato de obtener rectángulos en un lienzo de HTML5 con javascript. Normalmente esto no es problema, pero ahora cuando hago un rectángulo con el ancho y alto de 10. Parece que hace un rectángulo con el ancho de 10 y la altura de 20.

Estoy haciendo el Rectángulo como este :

var canvas = $("#canvas"); 
var context = canvas.get(0).getContext("2d"); 

context.fillRect(0, 0, 10, 10); 

El lienzo div se establece con una anchura de 100%, pero traté de darle un ancho fijo y que tampoco ayudó.

Answer 1

Es necesario establecer una anchura y altura en su elemento canvas, de lo contrario, este puede ser el resultado en algunos navegadores.

<canvas id="canvas" width="400" height="300" /> 

Y no puede establecer el tamaño del lienzo con CSS, esto estirará el lienzo.

Answer 2

El tamaño por defecto de la tela es de 300 x 150.

Usted probablemente está utilizando estos valores por defecto, lo que hará que el rectángulo parezca no cuadra ....