Dibujo de lienzo y pantalla Retina: ¿realizable?

Trabajando con phoneGap implementando dibujo con Canvas. Lo que nos hemos encontrado es que Canvas espera dimensiones de píxeles específicas. Esto está bien, excepto que la pantalla Retina del iPhone 4, desde un punto de vista de CSS/Webkit todavía tiene 320 píxeles de ancho, aunque técnicamente hay 640 píxeles de pantalla reales.Dibujo de lienzo y pantalla Retina: ¿realizable?

¿Hay alguna forma de acomodar la pantalla Retina usando Canvas en Webkit mientras se preserva la compatibilidad con pantallas que no son retina?

Fuente

2011-01-18 DA.

Véase mi respuesta para una solución drop-in ... http://stackoverflow.com/a/19546481/555384 – jondavidjohn

Me senté con el mismo problema la semana pasada y descubrió la forma de resolverlo -

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

if (window.devicePixelRatio > 1) { 
    var canvasWidth = canvas.width; 
    var canvasHeight = canvas.height; 

    canvas.width = canvasWidth * window.devicePixelRatio; 
    canvas.height = canvasHeight * window.devicePixelRatio; 
    canvas.style.width = canvasWidth; 
    canvas.style.height = canvasHeight; 

    ctx.scale(window.devicePixelRatio, window.devicePixelRatio); 
}

Full code on gist, demo on jsfiddle

Fuente

2011-03-15 02:37:28

Un muy agradecido '¡gracias!' Espero probar esto pronto. –

¿Podría reflejar este sitio en alguna parte? Ese enlace está roto. –

copie y pegue siempre la solución a stackoverflow, por lo que permanece disponible incluso si el sitio se desconecta. – kritzikratzi

código Web (http://www.webcodeapp.com) es una aplicación de dibujo vectorial que genera código JavaScript HTML5 Canvas para usted . El código es compatible con Retina, puedes ver cómo lo hacen.

Fuente

2013-06-06 09:58:33 atreidp

Eso también me recuerda a http://code.google.com/p/canvg/. Tenga en cuenta cómo maneja la retina. –

Hay un relleno polyfill que se encargará de la mayoría de las operaciones básicas de dibujo para usted y eliminará la ambigüedad entre los navegadores que manejan esto automáticamente para usted (safari) y otros que no lo hacen.

https://github.com/jondavidjohn/hidpi-canvas-polyfill

Sólo tiene que incluirla antes de su código de dibujo y hay que darle apoyo retina decente automáticamente.

Fuente

2013-10-23 15:51:02 jondavidjohn

Este relleno hace que mi lienzo crezca de forma extraña, cada vez que dibujo en mi lienzo hasta que casi cuelga mi pestaña en Safari. Creo que intentaré hacerlo manualmente. –

@JaredUpdike Suena como un gran candidato para informar a través de un problema de github con un ejemplo detallado para que pueda ser solucionado por otros. – jondavidjohn

EDIT: recién notado que publiqué el enlace incorrecto para la demostración.

Retina (u otra pantalla hdpi) resolución de lienzo es definitivamente posible. Hay un ejemplo de trabajo aquí:

http://spencer-evans.com/share/github/canvas-resizer/

También he encontré con esto unas cuantas veces. El código de respuesta aceptado es esencialmente correcto, pero también podría usar una solución de biblioteca. Elevé uno para manejar el redimensionamiento inteligente del lienzo para que el elemento sea más receptivo y de mayor resolución (como se muestra en la demostración).

https://github.com/swevans/canvas-resizer

Fuente

2015-11-06 02:34:02