How to render WebGL content using high DPI devices?

Question

What is the right way to setup a WebGL to render to all native pixels on a high dots-per-inch display (such as a macbook retina or pixel chromebook)?

Answer 1

for WebGL it's relatively simple.

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";

See http://www.khronos.org/webgl/wiki/HandlingHighDPI

There are conformance tests that these rules are followed. Specifically that the browser is not allowed to change the size of the backingstore for the canvas for a WebGL canvas.

For regular 2D canvas it's less simple but that was not the question asked.