Window.devicePixelRatio

Summary

This property returns the ratio of the resolution in physical pixels to the resolution in CSS pixels for the current display device. This value could also be interpreted as the ratio of pixel sizes: the size of one CSS pixel to the size of one physical pixel.

There are no callbacks or events to listen to when this value changes (for example, if you drag the window between displays with different densities).

Syntax

This property can be altered by overriding window.devicePixelRatio (for example, window.devicePixelRatio = 2)

value = window.devicePixelRatio;

Example

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

var canvasSize = 200;

//overriding default window.devicePixelRatio, changing it to 2 on retina display will make canvas clear
window.devicePixelRatio = 1;

canvas.width = canvas.height = canvasSize;

ctx.fillStyle = "#bada55";
ctx.fillRect(10, 10, 300, 300);
ctx.fillStyle = "#ffffff";
ctx.font = '18px Arial';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';

var x = canvasSize / 2;
var y = canvasSize / 2;

var textString = "I love MDN";
ctx.fillText(textString, x, y);

Specifications

Browser compatibility

See also

• CSS resolution media query
• PPK made some research on devicePixelRatio