Elemento de lienzo de escala con resolución estática

Question

Tengo elemento canvas y quiero reducirlo, pero sin cambiar su lógica js. El espacio de dibujo en js siempre debe ser de 600x300px, incluso si se muestra en HTML como 300x150px. Sé que puedo cambiar el tamaño de la imagen con resolución estática, pero ¿puedo hacer lo mismo con el lienzo?

Answer 1

Cambiar el tamaño usando CSS escalas que

Live Demo

Así que, básicamente, se establece el tamaño de los objetos de dibujo, etc, a través de los width y height propiedades al igual que

var canvas = document.getElementById("canvas"), 
    ctx = canvas.getContext("2d"); 

canvas.width = 600; 
canvas.height = 300; 

y luego el cambio su tamaño mostrado usando css

#canvas{ 
    width: 300px; 
    height: 150px; 
}​ 

Answer 2

Loktar tiene una forma, usar CSS, pero eso puede hacer que algunas cosas se vean divertidas. Por ejemplo, las rutas escaladas usando CSS y escaladas utilizando la propia transformación del lienzo pueden verse muy diferentes (con los CSS que se ven mal y los lisos que se ven sin problemas). Sin embargo, esto depende del navegador y podría estar perfectamente bien. En Chrome al menos, el texto escalado de esta manera se ve muy mal.

lugar que recomiendo mirar lo que he escrito aquí sobre el concepto de "modelo" Coordenadas: Working with canvas in different screen sizes

escribir todo como si el espacio de dibujo es 600x300, pero tenga un lienzo que es 300x150.

Antes de dibujar cualquier cosa, utilice ctx.scale(0.5, 0.5); y todo se verá genial!

Después de todo, es bastante posible escribir una aplicación de lienzo y hacer que se adapte a todo tipo de pantallas, incluso si solo se dirige a un tamaño de pantalla.