You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
34 lines
1.4 KiB
34 lines
1.4 KiB
2 years ago
|
# 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: /* ... */;
|
||
|
|
}
|
||
|
|
```
|