Dlaczego context2d.backingStorePixelRatio jest przestarzałe?

Question

Zgodnie z artykułem Paula Lewisa, High DPI Canvas: Aby rozwiązać problemy z rozmyciem, należy wziąć pod uwagę context.backingStorePixelRatio.

Jeśli ta właściwość byłaby przestarzała, czy lotka zajmie się problemem rozmycia w urządzeniu o wysokiej rozdzielczości?

Answer 1

myślałem dokładnie to samo i tak daleko, jak Issue Tracker mówi:

Tak więc artykuł został napisany z powrotem, gdy Safari miała podkład sklep stosunek 2. To zawsze było 1 w Chrome.

Jak można powiedzieć, że podejście do radzenia sobie z tym jest:

canvas.width = width * window.devicePixelRatio;
canvas.height = height * window.devicePixelRatio;

canvas.style.width = width + 'px';
canvas.style.height = height + 'px';

Gdzie width i height są jednak chcesz je (prawdopodobnie window.innerWidth & innerHeight dla pełnych widoków shenanigans.)

Wtedy po prostu trzeba dostosować do faktu, że upscaled płótno z:

ctx.scale(window.devicePixelRatio, window.devicePixelRatio);

Więc masz swoje rozwiązanie.