pptk/README.md

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

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:

.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: /* ... */;
}