Problem z HiDPI w canvas

Kochani!

Mam problem z wyświetlaniem grafiki w canvas.
Gdy wyświetlam grafikę na windowsie ze skalowaniem 100% wszystko jest ok.
Niestety gdy użyje skalowania 150% grafika robi się już rozmazana.

Postanowiłem to poprawić wdrażając to:
https://www.html5rocks.com/en/tutorials/canvas/hidpi/

Niestety jest jeszcze gorzej.

https://github.com/adams00/Przyklad-skalowania
https://adams00.github.io/Przyklad-skalowania/

W pliku js umieściłem jako komentarz poprzednią funkcje wyznaczającą wymiary canvas dla porównania.

Gdzie popełniłem błąd ?

Musisz go jeszcze CSS`em sztucznie pomniejszyć (czyli do style canvas dodać width: 300px;), tak żeby canvas miał 2x szerokość którą ma ekran, ale w CSS miał 1x tą szerokość.

Nie wiem czy to widać ale docelowo canvas** ma być kwadratem** o boku 90% wysokości window i oddalonym równo od górnej i dolnej granicy ekranu.

Gdy używam zakomentowanej funkcji to canvas ma właściwy kształt ale występuje rozmazanie.
Zmiany które miały poprawić ostrość zupełnie zmieniają kształt canvas.

Więc nie mam ani jednego ani drugiego.

Nadal odpowiedź pozostaje taka sama.

Jeżeli chcesz wyświetlić ładnie obrazek PNG o wielkości 100x100px pixeli na ekranie którego window.devicePixelRatio = 2 to musisz:
Wstawić obrazek o wielkości 200x200px i za pomocą CSS zmienić jego szerokość na 100px (ew. użyć srcset).

To samo dotyczy canvasa (który finalnie rysuje obrazek).

Chcesz żeby canvas był kwadratem o boku 90% wysokości window.
Więc rysujesz canvasa o szerokości = (window.innerHeight * 0.9) * window.devicePixelRatio; a następnie zmieniasz style width o (window.innerHeight * 0.9, albo w css piszesz width: 90vh;)

Musisz też pamiętać żeby rysując w canvas wszysto mnożyc przez ten pixel ratio. Jak chcesz narysować linie o długości 100px to rysujesz linie o długości 100 * window.devicePixelRatio; Nie pamiętam jak działa ctx.scale ale jeżeli spełnia swoją funkcje i wtedy nie musisz mnożyć wartości przez ten wskaźnik to spoko.

Zakładam, że wiesz jak umieścić ten canvas (oddalonym równo od górnej i dolnej granicy ekranu) i pytasz tylko o pixel ratio.

Unikałem dodawania wymiarów canvasa w CSS bo słyszałem że to zła praktyka jest.

W CSS była reguła że rodzic canvas ("main") ma 90vh.
I nie rozumiem dla czego canvas po wprowadzeniu zmian nie jest kwadratem.

Spoko, możesz zrobić to w JS efekt będzie taki sam (przez canvas.style.width).

W Google jest mnóstwo rozwiązań Twojego problemu: https://www.google.com/search?q=canvas+retina

Specjalnie zrobiłem repo żeby pokazać że wdrożyłem jedną z metod z internetu i działa jeszcze gorzej. Chciałbym się dowiedzieć co sprawia że canvas traci proporcje. Póki co nie wiem skąd się to bierze.

Ew. dodaj sobie libkę - https://github.com/jondavidjohn/hidpi-canvas-polyfill wtedy wszystko się samo ogarnie.

Na moim ekranie canvas ma wymiary 300x150 więc nie jest 2x większy niż powinien. Jest mniejszy i nieproporcjonalny.

Biblioteka działa. Ale narzuca konieczność uwzględniania pixelRatio przy każdym rysowaniu.

Edit: Udało mi się poprawnie wdrożyć tą bibliotekę do większego projektu.
Pojawiła się tylko jedna dziwna rzecz:
Gdy inicjuję canvasa w innym module niż tym w którym importuję bibliotekę to nie działa ona poprawnie.
Dopiero przeniesienie ich w jedno miejsce dało pozytywny efekt. Wiecie z czym to się mogło wiązać ?

https://github.com/jondavidjohn/hidpi-canvas-polyfill/blob/master/dist/hidpi-canvas.js
Ta libka podmienia istniejące implementacje "funkcji canvasowych", więc musisz ją importować zawsze przed tym jak użyjesz canvas (ew. możesz to zrobić raz w jakimś index.js).