Pixel Density

Pixel Density

Pixel density is how many pixels there are in a certian larger area. Such as PPI (pixels per inch) or PPCM (pixels per centimeter). Now in js we use this principle by accsesing the window property devicePixelRatio. This value is the amount of pixels on the display per CSS pixel. this i then used to make a canvas use every pixel the display has. Here in this example you can see if you have a high pixel density display on your device.

window.devicePixelRatio: 1

with my code to the left and without to the right

heres an image if you have normal pixel density

Analyzing my code

function setSize(canv, w, h) {

    //set the css size of the canvas

    canv.style.width = w + "px";

    canv.style.height = h + "px";

    

    //pixel Ratio correction

    canv.width = w*window.devicePixelRatio;

    canv.height = h*window.devicePixelRatio;

    

    //scaling back up so you can manipulate the canvas exactly like before

    canv.getContext("2d").scale (window.devicePixelRatio, window.devicePixelRatio);

}

so lets start, now that you know what pixel density is. What does my code do? It first sets how big the canvas is going to be on screen using css. then sets the size of the canvas to the css size * window.devicePixelRatio. then we get a canvas that uses all the pixels on your display. Afterwards i scale the canvas. That is so that you can manipulate the canvas with the same width and height varibales as before.

Example: Why i scale it

say for example you want the canvas to be 100 pixels wide and your pixel ratio is 2. Then after changing the inner width of the canvas it will be 200 (100*2). so when you try to make a square the "width" of the canvas you inputed. It will only fill half of it. So thats why you scale it.

Extra

The other way of doing it is adding *window.devicePixelRatio to the end of every number or variable that needs it (very tidius and a source of bugs if you forget to).

Tutorial Pixel Density