HTML Canvas

HTML5 Canvas omogućava ispunjavanje oblika linearnim i radijalnim gradijentima. 

CanvasGradient objekt generira se pomoću sljedećih metoda:
  • createLinearGradient(x1, y1, x2, y2)                       // x1 i y1 koordinate početne, a x2 i y2 koordinate krajnje točke
  • createRadialGradient(x1, y1, r1, x2, y2, r2)           //parametri predstavljaju dva kruga, jedan sa središtem u točki (x1, y1) i polumjerom r1                                                                                           drugi sa središtem u točki (x2, y2) i polumjerom r2.
Nakon što je stvoren CanvasGradient objekt njemu se dodjeljuje boja pomoću metoda addColorStop().

gradient.addColorStop(pos, color) 

pos je broj između 0 i 1 i određuje relativni položaj boje u gradijentu, a color označava boju koju gradijent treba dostići pri tom pomaku. Kreirani objekt se potom pridružuje svojstvima fillStyle i strokeStyle.