# Pixel-Perfect ToolKit

This library aims to solve two problems in web-development, that are notoriously hard to both solve at once:
- support for mobile devices (high-DPI, multi-touch, etc.)
- pixel-perfect control, notably for [pixel fonts](https://github.com/adri326/online-pixel-font-creator)

## Limitations

### Canvases must be contained

Because canvases must have an integer width and height, and because `window.devicePixelRatio` may be a floating-point value.

For instance, if `dpr = 1.5` and the desired with is `81` CSS pixels, then the desired canvas width would be `81 * 1.5 = 121.5`.
Naively setting `canvas.width = 121.5` results in the browser truncating it to `121`, which only cover `121 / 1.5 ≈ 80.66` CSS pixels, resulting in blurred edges as the element has to be stretched horizontally by `0.4%`.

Instead, we set `canvas.width = Math.ceil(121.5) = 122`, then set `canvas.style.width` to `122 / 1.5 ≈ 81.33px`.
This requires a parent "container" element to read the desired width from and to hide the overflowing `0.33` CSS pixel.

This is what the container element should have as style:

```css
.container {
    /* Necessary properties */
    overflow: hidden;

    /* Optionally set a different background color to reduce flicker */
    background-color: /* ... */;

    /* Width and height should be set to anything besides `fit-content` */
    width: /* ... */;
    height: /* ... */;
}
```