Sokszögek

Téglalap, négyzet

A négyszögek esetében társfüggvények:
fillStyle – kitöltési stílus, az elem háttérszíne, Alapértelmezett állapotban fekete, mint ahogy a négyzetünk is.
fillRect (x, y) – szélesség, magasság alapján négyszöget rajzol
strokeStyle – keret stílusa, színe
lineWidth – a keretvastagságot definiálhatjuk vele
strokeRect (x, y) – négyszöget rajzol az érvényben lévo körvonallal
clearRect (x, y) – a koordináták alapján a négyszög képpontjait törli

<canvas id="rajzvaszon" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById('rajzvaszon');
var ctx = canvas.getContext('2d');

ctx.fillRect(50, 50, 150, 150); /*alapértelmezett négyzet*/
ctx.fillStyle = "rgb(0, 160, 230)"; /*kék színu négyzet*/
ctx.fillRect(135, 75, 125, 125);

ctx.lineWidth = 4; /*keret vastagság definició*/
ctx.strokeStyle = "rgb(0, 0, 0)"; /*fehér négyzet*/
ctx.strokeRect(50, 350, 150, 150);

ctx.fillStyle = "rgba(0, 160, 230, 0.75)"; /*transzparens négyzet*/
ctx.fillRect(150, 400, 125, 125);
</script>

Sokszög

BeginPath() – ClosePath() avagy rajzoljunk tollal
Erre van lehetoség, ha megadjuk a toll útvonalát. Ezt a beginPath() metódussal kell kezdenünk és a closePath() metódussal pedig lezárnunk. Amit rajzolunk, azt pedig a két elem közé tesszük listaszeruen, amit a legvégén megjeleníthetünk.
Ha egyenes vonalat akarunk rajzolni, akkor azt a következo módon tehetjük:
moveTo (x, y) – A ceruzát a megadott kezdopontba mozgatja
lineTo (x, y) – A megadott végpontig vonalat húz
fill() – kitölti a megrajzolt formát