Tekst i obrazy na canvas

Ustaw czcionkę: ctx.font = "bold 24px sans-serif". Rysuj tekst: ctx.fillText("Hello", x, y) lub ctx.strokeText("Hello", x, y). Współrzędna y oznacza linię bazową tekstu — aby prawidłowo umieścić tekst w prostokącie ograniczającym, dodaj nad nią wysokość części wznoszącej znaków.

ctx.textAlign określa wyrównanie w poziomie: "left" (domyślne), "center", "right". ctx.textBaseline określa wyrównanie w pionie względem y: "top", "middle", "alphabetic" (domyślne), "bottom". Aby wyśrodkować tekst, ustaw odpowiednio "center" i "middle".

ctx.measureText("text") zwraca obiekt TextMetrics zawierający szerokość i metryki czcionki. Używaj go do dynamicznego obliczania pozycji tekstu — na przykład do wyśrodkowania tekstu w polu, zawijania go przy maksymalnej szerokości lub wyrównania etykiet do prawej obok punktów danych.

Canvas nie ma wbudowanego zawijania tekstu. Należy zaimplementować je samodzielnie: mierzyć szerokości słów i dodawać je do bieżącego wiersza, aż zostanie przekroczona wartość maxWidth, a następnie przechodzić do nowego wiersza w odstępach lineHeight. Jest to często spotykana funkcja pomocnicza w bibliotekach do renderowania na canvasie.

ctx.drawImage(image, dx, dy) rysuje element HTMLImageElement, HTMLCanvasElement lub HTMLVideoElement w punkcie (dx, dy). Najpierw wczytaj obraz i rysuj go w jego procedurze onload, aby mieć pewność, że piksele są dostępne przed rozpoczęciem rysowania.

ctx.drawImage(image, dx, dy, dw, dh) skaluje obraz do wymiarów dw × dh. Zachowanie proporcji nie odbywa się automatycznie — wymiary należy obliczyć samodzielnie. Aby zachować proporcje: dw = img.width * scale; dh = img.height * scale.

drawImage przyjmuje dziewięć argumentów: ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh). Prostokąt źródłowy (sx, sy, sw, sh) wycina fragment obrazu, a prostokąt docelowy (dx, dy, dw, dh) umieszcza i skaluje ten fragment na canvasie.

ctx.imageSmoothingEnabled = false wyłącza interpolację dwuliniową podczas skalowania obrazów. Używaj tej opcji w przypadku pixel artu, gdy potrzebne jest ostre skalowanie bez wygładzania. Pozostaw ją włączoną (domyślnie) dla zdjęć, przy których płynne skalowanie wygląda lepiej.

Przekaż canvas jako źródło do drawImage, aby renderować jeden canvas na innym. Umożliwia to renderowanie poza ekranem: narysuj złożone kompozycje na ukrytym canvasie, a następnie w każdej klatce narysuj ten canvas na widocznym w ramach jednej operacji.

ctx.globalAlpha (od 0 do 1) stosuje jednolitą przezroczystość do wszystkich kolejnych operacji rysowania. ctx.globalCompositeOperation określa sposób łączenia nowych rysunków z istniejącymi pikselami: "source-over" (domyślne), "multiply", "screen", "destination-out" (wymazywanie) i inne.

canvas.toDataURL("image/png") eksportuje canvas jako adres URL danych PNG zakodowanych w base64. Używaj go do pobierania inicjowanego przez użytkownika: utwórz kotwicę, ustaw href na adres URL danych, a atrybut download na nazwę pliku, a następnie programowo ją kliknij.

Renderowanie tekstu na canvasie korzysta z ctx.font, fillText/strokeText, textAlign i textBaseline do ustalania pozycji oraz z measureText do obliczeń związanych z układem. Rysowanie obrazów za pomocą drawImage obsługuje skalowanie i kadrowanie, a globalAlpha i globalCompositeOperation kontrolują sposób łączenia elementów. toDataURL eksportuje canvas do pobrania lub dalszego wykorzystania.