Как визуализировать содержимое WebGL с использованием высокоуровневых устройств DPI?

Question

Каков правильный способ настройки WebGL для рендеринга для всех собственных пикселей на дисплее с высокой точкой на дюйм (например, сетчатой ​​сетью macbook или пиксельной хромированной книгой)?

Answer 1

для WebGL это относительно просто.

var desiredCSSWidth = 400; 
var desiredCSSHeight = 300; 
var devicePixelRatio = window.devicePixelRatio || 1; 

canvas.width = desiredCSSWidth * devicePixelRatio; 
canvas.height = desiredCSSHeight * devicePixelRatio; 

canvas.style.width = desiredCSSWidth + "px"; 
canvas.style.height = desiredCSSHeight + "px"; 

См http://www.khronos.org/webgl/wiki/HandlingHighDPI

Есть тесты на совместимость, что эти правила соблюдены. В частности, браузеру не разрешено изменять размер резервного хранилища для холста для холста WebGL.

Для обычного двумерного холста он менее прост, но об этом не спрашивали.