DARMOWE NARZĘDZIE

Canvas Resolution Tester

Oblicz wymiary bufora canvas HTML5 dla dowolnego DPR i rozdzielczości CSS. Generuje gotowy snippet JavaScript z ustawieniami canvas dla ekranów Retina i HiDPI. Profesjonalne narzędzie online, które działa w Twojej przeglądarce. Szybko, bezpiecznie i bez instalowania zbędnego oprogramowania.

Bezpieczne (SSL)

Przetwarzanie Lokalne

100% Darmowe

Przejdź do narzędzia

Instrukcja

1

Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku.
2

Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce.
3

Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.

                                                function runTool() {

                                                  return "Wynik gotowy w 0.1s";

                                                }

Ustawienia

Wzorzec

Etykieta

Szerokość CSS (px)

Wysokość CSS (px)

DPR (Device Pixel Ratio)

Pokaż osie Opcja narzędzia

Wynik

ℹ️ Narzędzie oblicza parametry bufora canvas po stronie serwera. Faktyczny DPR ekranu odczytasz w przeglądarce przez window.devicePixelRatio.

Ustaw parametry i kliknij „Przetwórz", aby zobaczyć wynik. Narzędzie oblicza rozdzielczość bufora canvas dla podanego DPR.

Powiązane narzędzia

Inne narzędzia, które mogą Ci się przydać

Tester rozdzielczości canvas przeglądarki

Oblicz dokładne wymiary bufora canvas HTML5 dla dowolnej kombinacji rozdzielczości CSS i współczynnika DPR (Device Pixel Ratio). Narzędzie generuje gotowy snippet JavaScript dostosowany do Twoich parametrów i pokazuje zużycie pamięci RGBA.

canvas HTML5 DPR / Retina bufor pikseli snippet JS darmowe online

Do czego służy

Tester rozdzielczości canvas przeglądarki pomaga programistom front-end i twórcom gier webowych precyzyjnie dobrać wymiary bufora canvas do rozdzielczości ekranu. Podajesz rozmiar elementu canvas w pikselach CSS (szerokość i wysokość) oraz wartość DPR — na przykład 2 dla ekranów Retina lub HiDPI — a narzędzie oblicza faktyczne wymiary bufora w pikselach urządzenia, liczbę pikseli i szacowane zużycie pamięci RGBA. Dzięki temu unikniesz rozmytych grafik na wyświetlaczach o wysokiej gęstości pikseli i nie zmarnujesz pamięci na zbyt duże bufory.

Jak używać

Wypełnij pola: wybierz wzorzec testowy (siatka, szachownica, przekątne lub tekst), wpisz etykietę testową, podaj szerokość i wysokość CSS w pikselach oraz wartość DPR swojego ekranu (możesz ją sprawdzić wpisując window.devicePixelRatio w konsoli przeglądarki). Opcjonalnie włącz osie pomocnicze. Kliknij „Przetwórz" — po prawej zobaczysz karty z parametrami bufora oraz gotowy snippet JavaScript, który możesz skopiować do projektu i użyć bezpośrednio w kodzie canvas.

Najczęstsze pytania

Czym jest DPR i dlaczego ma znaczenie dla canvas?

Device Pixel Ratio (DPR) określa, ile fizycznych pikseli urządzenia przypada na jeden piksel CSS. Na standardowych monitorach wynosi 1, na ekranach Retina (Apple) i HiDPI — zazwyczaj 2, a na niektórych smartfonach nawet 3 lub więcej. Jeśli nie dostosujesz rozmiaru bufora canvas do DPR, rysunek będzie wyglądał rozmycie na ekranach o wysokiej rozdzielczości.

Jak duży bufor canvas mogę bezpiecznie użyć?

Zależy od urządzenia i przeglądarki. Orientacyjnie: 1920×1080 przy DPR 2 daje bufor 3840×2160 = ~33 Mpx = ~127 MB RGBA. Przeglądarki mobilne mogą mieć limit 16–64 MB na kontekst canvas. Narzędzie wyświetla szacowane zużycie pamięci — jeśli przekracza kilkadziesiąt MB, rozważ zmniejszenie DPR lub podział na warstwy/kafle (tiles).

Czy narzędzie rysuje canvas w przeglądarce?

Nie — obliczenia wykonywane są po stronie serwera. Narzędzie oblicza parametry i generuje snippet JavaScript, który możesz uruchomić samodzielnie. Faktyczny DPR ekranu sprawdzisz przez window.devicePixelRatio w konsoli przeglądarki.