MDN will be in maintenance mode on Friday September 22nd, starting at 10 AM Pacific / 5 PM UTC, for about 1 hour.

The Window property devicePixelRatio 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. In simpler terms, this tells the browser how many of the screen's actual pixels should be used to draw a single CSS pixel.

This is useful when dealing with the difference between rendering on a standard display versus a HiDPI or Retina display, which use more screen pixels to draw the same objects, resulting in a sharper image.

There is no way to be notified when this value is changed (which can happen, for example, if the user drags the window to a display with a different pixel density). Since there are no callbacks or events available to detect pixel density changes, the only way to do so is to periodically check the value of devicePixelRatio to see if it's changed. Just don't do it too often, or you'll impact performance

Syntax

This property can be altered by changing the value of window.devicePixelRatio (for example, window.devicePixelRatio = 2 doubles the number of screen pixels used to draw each CSS pixel)

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

This image describe the impact of different value on retina display.

Specifications

Specification Status Comment
CSS Object Model (CSSOM) View Module
The definition of 'Window.devicePixelRatio' in that specification.
Working Draft Initial definition

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) (Yes) 49 11 41 9.1
Feature Android Webview Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) (Yes) (Yes) ? ? all 9.3

See also

Document Tags and Contributors

 Last updated by: zbjornson,