¿El tamaño de píxel de Canvas HTML5 depende del tamaño del lienzo?

Question

estoy dibujando líneas simples con el lienzo HTML5:

context = $('canvas')[0].getContext('2d'); 
context.moveTo(150, 20); 
context.lineTo(300, 20); 
context.stroke(); 

Cuando mis CSS lona de cambios:

canvas { 
    width: 500px; 
    height: 500px; 
} 

a

canvas { 
    width: 1000px; 
    height: 1000px; 
} 

el trazo ancho y la altura también doble! ¿Lo que da?

Answer 1

El CSS sólo determina su tamaño visible. Cambie los atributos width y height en el HTML para ajustar el número real de píxeles que lo componen. Si en el HTML es 100x100, y en CSS 200x200, se escalará visualmente en 2X.

Answer 2

respondida aquí: Resize HTML5 canvas to fit window