Element html-owy canvas

Element html-owy canvas umożliwia nam rysowanie na stronie html przy pomocy Javascriptu. Możemy tworzyć zarówno grafikę wektorową jak i rysować załadowane pliki graficzne - w całości lub ich wskazane fragmenty. Poniżej znajduje się wykaz dostępnych funkcji wraz z ich krótkim opisem. Generalnie aby coś narysować, należy pobrać wskaźnik na element canvas a następnie uzyskać wskaźnik na kontekst graficzny tego elementu, np (kod rysujący prostokąty):

function draw_rects() {
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    ctx.fillStyle = "rgb(200,0,0)";
    ctx.fillRect (10, 10, 55, 50);

    ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
    ctx.fillRect (30, 30, 55, 50);
}

Wszystkie poniższe funkcje wywołujemy na elemencie ctx:

fillRect(x,y,width,height):	Rysuje wypełniony kolorem prostokąt
strokeRect(x,y,width,height):	Rysuje obramowanie prostokątu
clearRect(x,y,width,height):	Czyści podany fragment canvasu
beginPath():	Rozpoczyna rysowanie ścieżki
closePath():	Kończy rysowanie ścieżki
stroke():	Rysuje linię wzdłuż ścieżki
fill():	Wypełnia ścieżkę kolorem
moveTo(x, y):	Przenosi punkt rysowania do podanych współrzędnych
lineTo(x, y):	Rysuje linię od bieżącej do podanej pozycji
arc(x, y, radius, startAngle, endAngle, anticlockwise):	Rysuje łuk o podanych współrzędnych
quadraticCurveTo(cp1x, cp1y, x, y):	Rysuje krzywą o podanych współrzędnych
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y):	Rysuje krzywą Beziera o podanych współrzędnych
rect(x, y, width, height):	Dodaje prostokątną ścieżkę do bieżącej ścieżki
drawImage(image, x, y):	Rysuje na płótnie obrazek w podanych współrzędnych. Może to być: obrazek już istniejący (document.getElementById('img_id'), obrazek utworzony dynamicznie: new Image('/url/of/image'), inny już istniejący canvas: document.getElementById('other_canvas_id')
drawImage(image, x, y, width, height):	Rysuje na płótnie obrazek w podanych współrzędnych i o podanych wymiarach (przeskalowany)
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight):	Rysuje na płótnie obrazek lub jego fragment w podanych współrzędnych i o podanych wymiarach (przeskalowany)
ctx.mozImageSmoothingEnabled = false;	Gecko 1.9.2 wprowadziło atrybut mozImageSmoothingEnabled elementu canvas, jeśli ma on wartość false, to obrazki nie będą wygładzane podczas skalowania. Domyślnie ma on wartość true.
ctx.fillStyle = color:	Ustawienie koloru wypełniania, np: "orange", "#FFA500", "rgb(255,165,0)" or "rgba(255,165,0,1)"
ctx.strokeStyle = color:	Ustawienie koloru krawędzi
ctx.globalAlpha = transparency:	Ustawienie globalnej wartości przeźroczystości (mającej zastosowanie do wszystkich nowo rysowanych elementów graficznych). Może mieć wartość od 0.0 (pełna przeźroczystość) do 1.0 (brak przeźroczystości)
ctx.lineWidth = value:	Ustawia grubość linii
ctx.lineCap = type:	Ustawia typ początku i końca linii
ctx.lineJoin = type:	Ustawia typ punktów łączenia linii w ścieżce
ctx.miterLimit = value:
var gradient = createLinearGradient(x1,y1,x2,y2):	Tworzy gradient liniowy o podanych współrzędnych
var gradient = createRadialGradient(x1,y1,r1,x2,y2,r2):	Tworzy gradient kulisty o podanych współrzędnych
gradient.addColorStop(position, color):	Dodaje do gradientu stop-punkt o podanym kolorze
var pattern = createPattern(image,type):	Tworzy tapetę z podanego obrazka
shadowOffsetX = float:	Ustawia przesunięcie na osi X cienia dla nowo rysowanych obiektów
shadowOffsetY = float:	Ustawia przesunięcie na osi Y cienia dla nowo rysowanych obiektów
shadowBlur = float:	Ustawia stopień rozmycia cienia
shadowColor = color:	Ustawia kolor cienia
fillText(text,x,y):	Rysuje tekst na płutnie
save():	Zapamiętuje na stosie aktualny stan płótna
restore():	Pobiera stan płótna ze szczytu stosu i go przywraca
translate(x, y):	Przesuwa płutno o podany wektor
rotate(angle):	Obraca płutno o podany kąt
scale(x, y):	Skaluje płutno wzdłuż osi x i y o podany współczynnik
translate(0,canvas.height); scale(1,-1):	Po wykonaniu tych dwóch instrukcji otrzymamy dobrze znany Kartezjański system współrzędnych (o początku w lewym dolnym rogu)
transform(m11, m12, m21, m22, dx, dy):	Transformuje płutno zgodnie z podanym współczynnikami macierzy przekształcenia
setTransform(m11, m12, m21, m22, dx, dy):
globalCompositeOperation = type:	Ustawia typ pokrywania/przecinania się nachodzących na siebie kształtów
clip():	Funkcja służąca do podania obszaru wewnątrz, którego rysowane są kształty. Jeśli części tych kształtów wychodzą poza wskazany obszar, to są one obcinane.