HTML Canvas
<canvas id=“platno“ width=“300“ height=“300“></canvas>
- U HTML datoteci definiran je okvir ili „prazan papir“ unutar kojeg crtamo pomoću JS –a.
- Canvas kontekst je objekt koji sadrži svojstva i metode koji se mogu koristiti za iscrtavanje grafike unutar HTML5 <canvas> elementa.
- Svaki <canvas> element može imati najviše jedan kontekst.
- <canvas> element ima DOM (Document Object Model) metodu getContext() koja se koristi za dobivanje konteksta i funkcija za crtanje.
- getContext() ima jedan parametar – tip konteksta, koji može biti 2d ili 3d.
Pristup elementu putem njegovog id –a i njegovom kontekstu preko getContext() metode:
var ctx = document.getElementById('platno').getContext('2d’);
Primjer:
index.html
canvas.js
Funkcija draw() uzima canvas element i dobiva 2d kontekst. Objekt ctx tada može biti korišten za ostvarivanje prikaza canvas -a.
canvas.css
canvas {border: 1px dashed darkgray;}