Tester rozdzielczości canvas przeglądarki

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.

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.

Rozdzielczość bufora canvas

1600 × 900 px

px urządzenia — narzędzie liczy round(wymiar CSS × DPR)

Rozmiar CSS

800 × 450 px

rozmiar elementu na stronie, canvas.style.width/height

DPR

mnożnik bufora; realny DPR ekranu odczytasz przez window.devicePixelRatio

Piksele łącznie

1 440 000

szerokość bufora × wysokość bufora

Pamięć RGBA

5,49 MB

piksele × 4 bajty (kanały R, G, B, A po 8 bitów)

Maks. powierzchnia (limit Safari)

8,6 %

limit Safari/iOS to 16 777 216 px² (4096 × 4096)

Wynik testu

Render wykonalny

ok do limitu Safari, uwaga do limitu Chrome/Firefox (268 435 456 px²), problem powyżej

Podsumowanie testu rozdzielczości canvas
-----------------------------------------
Etykieta: Test rozdzielczości: siatka 1px + tekst
Rozmiar CSS: 800 × 450 (px CSS)
DPR: 2
Zalecany bufor renderowania: 1600 × 900 (px urządzenia)
Liczba pikseli łącznie: 1,440,000
Szacowana pamięć RGBA: 5.49 MB
Wzorzec: grid | Osie: włączone

Przykładowy kod (rysowanie w pikselach CSS, bufor uwzględniający DPR):

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
const cssW = 800;
const cssH = 450;
const dpr = window.devicePixelRatio || 2;

canvas.style.width = cssW + "px";
canvas.style.height = cssH + "px";
canvas.width = Math.round(cssW * dpr);
canvas.height = Math.round(cssH * dpr);

ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
ctx.clearRect(0, 0, cssW, cssH);
// Od tego miejsca rysuj używając współrzędnych w pikselach CSS.

Uwaga: przy dużych canvasach warto ograniczyć DPR lub użyć warstw/kafelków, aby kontrolować zużycie pamięci i koszt przerysowania.

Ściąga: typowe rozdzielczości a bufor canvas przy DPR 2

Wartości policzone po stronie serwera dokładnie formułą tego narzędzia (bufor = round(wymiar CSS × DPR), pamięć = piksele × 4 bajty). Limity powierzchni canvas w przeglądarkach: Safari/iOS 16 777 216 px² (4096 × 4096), Chrome/Firefox ok. 268 435 456 px² (16 384 × 16 384).

Typowe rozdzielczości ekranu a zalecany bufor canvas (DPR 2)
Rozdzielczość CSS	Piksele (px CSS)	Bufor przy DPR 2	Pamięć RGBA	Mieści się w limitach Safari
HD (720p) — 1280 × 720	3 686 400	2560 × 1440	14,1	tak
Full HD (1080p) — 1920 × 1080	8 294 400	3840 × 2160	31,6	tak
QHD (1440p) — 2560 × 1440	14 745 600	5120 × 2880	56,3	tak
4K UHD (2160p) — 3840 × 2160	33 177 600	7680 × 4320	126,6	nie
8K UHD (4320p) — 7680 × 4320	132 710 400	15360 × 8640	506,3	nie

Kolumna „Piksele” to liczba pikseli w px CSS (szerokość × wysokość); przy włączonym DPR bufor ma ich czterokrotność, a pamięć rośnie tyle samo — dlatego przy 8K narzędzie sugeruje ograniczenie DPR albo rysowanie warstwami/kafelkami.

Ściąga: co liczy tester rozdzielczości canvas

Zakres testu 1:1 z kodem silnika
Element	Jak jest liczony / opisany
Bufor renderowania	canvas.width/height = round(szerokość CSS × DPR) i round(wysokość CSS × DPR) — dokładnie tę parę liczy silnik narzędzia
Liczba pikseli	szerokość bufora × wysokość bufora (px urządzenia, nie px CSS)
Pamięć RGBA	piksele × 4 bajty (8 bit na kanał R/G/B/A), przeliczone na MB (1 MB = 1 048 576 B)
Przykładowy kod	gotowy snippet w raporcie: canvas.style w px CSS, canvas.width/height z DPR, ctx.setTransform(dpr, 0, 0, dpr, 0, 0) — rysowanie we współrzędnych CSS
Wzorzec i osie	etykieta testu w raporcie: grid (siatka z linii 1 px), checker (szachownica), diagonal (przekątne), text (tylko tekst) + informacje, czy osie mają być włączone
Zakres wejścia	wymiary CSS 1–8000 px na bok, DPR 0,5–6 (walidacja silnika)

Narzędzie oblicza parametry po stronie serwera — rysowanie wzorca (siatka, szachownica, przekątne, tekst) wykonuje Twoja przeglądarka na własnym elemencie canvas, korzystając z wygenerowanego kodu i zalecanego bufora.

Warto wiedzieć — canvas a rozdzielczość ekranu

Piksele CSS to nie piksele canvas

Element o rozmiarze 800 × 450 px CSS na ekranie z DPR 2 zajmuje fizycznie 1600 × 900 pikseli. Jeśli canvas.width zostawi się 800, przeglądarka rozciągnie bitmapę i obraz będzie rozmazany — stąd zalecany bufor round(CSS × DPR) i ctx.setTransform(dpr, 0, 0, dpr, 0, 0), żeby dalej rysować we współrzędnych CSS.

Pamięć rośnie kwadratowo

Bitmapa canvas to piksele × 4 bajty. Podwojenie obu boków (np. DPR z 1 na 2) daje cztery razy więcej pikseli i cztery razy więcej RAM — przy 4K z DPR 2 jest to ponad 126 MB na jedną warstwę. Duże canvasy potrafią też przekroczyć limity przeglądarki i zostać po prostu puste.

Limity Safari i Chrome

Safari/iOS renderuje canvas o powierzchni do ok. 16 777 216 px² (4096 × 4096). Chrome i Firefox pozwalają na ok. 268 435 456 px². Powyżej limitu przeglądarka często tworzy puste płótno bez komunikatu — kafelek „Wynik testu” ostrzega, gdy bufor zbliża się do tych progów.

Jak zejść z rozmiaru bufora

Najprościej ograniczyć DPR (np. rysować w DPR 1 i pozwolić przeglądarce przeskalować), dzielić dużą scenę na kafelki albo warstwy renderowane osobno, a statyczne tło trzymać jako obraz zamiast przerysowywać całość co klatkę.

Oceń to narzędzie:

Powiązane narzędzia

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

Tester Rozdzielczości Canvas — zdiagnozuj parametry renderowania grafiki HTML5

Technologia HTML5 Canvas zrewolucjonizowała tworzenie interaktywnych treści w sieci, umożliwiając dynamiczne renderowanie grafiki dwuwymiarowej i trójwymiarowej bezpośrednio w przeglądarce, bez potrzeby używania wtyczek. Jednak optymalne renderowanie obrazu zależy od parametrów ekranu oraz wydajności karty graficznej użytkownika. Nasz profesjonalny tester rozdzielczości Canvas to zaawansowane narzędzie diagnostyczne online, które weryfikuje logiczne i fizyczne wymiary płótna, bada współczynnik gęstości pikseli oraz analizuje limity pamięci przeglądarki.

Dlaczego rozmiar logiczny Canvas różni się od rozmiaru fizycznego?

Jednym z najczęstszych problemów, z jakimi mierzą się programiści i projektanci interfejsów, jest różnica pomiędzy wymiarami logicznymi a fizycznymi elementu Canvas. Rozmiar logiczny to liczba pikseli zdefiniowana bezpośrednio w atrybutach width i height znacznika HTML (np. width="800" height="600"). Określa on wewnętrzny bufor rysowania przeglądarki. Z kolei rozmiar fizyczny to rzeczywisty obszar zajmowany przez element na ekranie komputera lub telefonu, kontrolowany za pomocą stylów CSS (np. width: 100%).

Jeśli te dwie wartości nie są ze sobą zsynchronizowane lub nie uwzględniają gęstości pikseli wyświetlacza, wyrenderowana grafika będzie rozmyta lub zniekształcona. Szczególnie widoczne jest to na nowoczesnych ekranach typu Retina czy AMOLED o wysokiej gęstości, gdzie jeden piksel logiczny w CSS odpowiada kilku fizycznym pikselom matrycy. Zrozumienie tych zależności jest kluczowe dla tworzenia ostrych tekstów i płynnych animacji.

Jak działa nasz tester rozdzielczości Canvas online?

Nasz tester przeprowadza natychmiastową analizę środowiska uruchomieniowego przeglądarki. Po uruchomieniu strony narzędzie odczytuje wartość właściwości window.devicePixelRatio, która wskazuje stosunek rozdzielczości fizycznej ekranu do rozdzielczości logicznej CSS. Następnie na niewidocznym płótnie testowane są maksymalne wymiary bufora renderowania, jakie jest w stanie obsłużyć Twoja przeglądarka i karta graficzna przed wystąpieniem błędu przepełnienia pamięci.

Wyniki testu prezentowane są w czytelnej formie. Dowiesz się, jaka jest optymalna rozdzielczość płótna do rysowania grafiki 2D oraz 3D (WebGL), jakie są fizyczne wymiary bufora w pikselach oraz czy Twoja przeglądarka korzysta z akceleracji sprzętowej. Narzędzie wykonuje również krótki test wydajnościowy, mierząc czas potrzebny na wyrenderowanie określonej liczby obiektów geometrycznych, co pozwala ocenić sprawność silnika JavaScript i sterowników graficznych na Twoim urządzeniu.

Rozwiązanie problemu rozmytej grafiki na ekranach Retina

Aby uzyskać idealnie ostry obraz na ekranach o wysokiej gęstości pikseli, programiści muszą zastosować odpowiednią technikę skalowania płótna. Proces ten polega na pobraniu współczynnika devicePixelRatio i pomnożeniu przez niego logicznych atrybutów width oraz height elementu Canvas. Przykładowo, jeśli chcemy wyświetlić na ekranie płótno o wymiarach trzysta na dwieście pikseli przy współczynniku równym dwa, wewnętrzny bufor rysowania musi zostać ustawiony na sześćset na czterysta pikseli.

Kolejnym krokiem jest ustawienie stylów CSS elementu Canvas z powrotem na wymiary logiczne (trzysta na dwieście pikseli). Na koniec należy wywołać metodę scale na kontekście renderowania (context.scale(ratio, ratio)), co sprawi, że wszystkie kolejne operacje rysowania zostaną automatycznie przeskalowane, a grafika będzie idealnie ostra, bez jakichkolwiek rozmyć na krawędziach. Nasz tester w przejrzysty sposób pokazuje, jak te modyfikacje wpływają na jakość obrazu w czasie rozdzielczym.

Ograniczenia sprzętowe i limity pamięci elementu Canvas

Element Canvas, mimo swoich ogromnych możliwości, podlega ograniczeniom narzucanym przez system operacyjny, przeglądarkę oraz dostępną pamięć RAM i VRAM. Przeglądarki internetowe mają ściśle określone limity maksymalnej szerokości i wysokości pojedynczego płótna – przekroczenie tych wartości (na przykład próba utworzenia Canvas o wymiarach dwadzieścia tysięcy na dwadzieścia tysięcy pikseli) spowoduje, że element nie zostanie wyrenderowany, a w konsoli deweloperskiej pojawi się błąd.

Limity te różnią się w zależności od platformy. Na urządzeniach mobilnych, z uwagi na oszczędność pamięci, limity te są znacznie niższe niż na komputerach stacjonarnych. Korzystając z naszego testera, deweloperzy mogą łatwo sprawdzić, na jakie ustępstwa wydajnościowe muszą pójść w swoich projektach, aby ich gry i aplikacje działały stabilnie na każdym urządzeniu bez ryzyka zawieszenia przeglądarki użytkownika.

Najczęściej zadawane pytania

Dlaczego grafika na płótnie Canvas jest rozmyta na moim telefonie?

Rozmycie wynika z wysokiej gęstości pikseli (Retina/AMOLED) w telefonach. Jeśli rozmiar wewnętrznego bufora Canvas (atrybuty width/height) nie zostanie pomnożony przez współczynnik devicePixelRatio, przeglądarka rozciągnie mniejszy obraz do wymiarów CSS, co poskutkuje utratą ostrości.

Jaka jest różnica między atrybutami width/height a stylami CSS elementu Canvas?

Atrybuty width i height określają logiczną rozdzielczość bufora rysowania (liczbę pikseli, na których operuje kod JavaScript). Style CSS (np. width: 100%) określają fizyczny rozmiar wyświetlania elementu na stronie internetowej, podobnie jak w przypadku zwykłego obrazka.

Jakie są maksymalne limity rozmiaru Canvas w przeglądarkach?

Maksymalny limit zależy od przeglądarki i sprzętu. Zazwyczaj na komputerach stacjonarnych wynosi on 16384x16384 pikseli dla przeglądarek Chrome i Safari, natomiast na urządzeniach mobilnych limity te mogą być ograniczone do 4096x4096 pikseli z uwagi na oszczędność pamięci RAM.

Czym jest współczynnik devicePixelRatio i jak go sprawdzić?

Współczynnik devicePixelRatio (dostępny w JS jako window.devicePixelRatio) określa, ile fizycznych pikseli ekranu przypada na jeden logiczny piksel CSS. Wartość ta wynosi 1 dla tradycyjnych monitorów, natomiast dla ekranów Retina i nowoczesnych smartfonów waha się zazwyczaj od 2 do 4.

Czy test rozdzielczości Canvas obciąża procesor lub kartę graficzną?

Test wykonuje krótkotrwałe operacje diagnostyczne, które trwają ułamek sekundy i nie stanowią żadnego zagrożenia dla stabilności urządzenia. Pomiar wydajności renderowania jest optymalnie zaplanowany i nie powoduje trwałego obciążenia procesora ani karty graficznej.