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

• 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, a 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 koji određuje relativni položaj boje u gradijentu, dok color označava boju koju gradijent treba dostići pri tom pomaku. Kreirani se objekt potom pridružuje svojstvima fillStyle i strokeStyle.

Primjer:

Boje                                                                                                                                                                                                                        “Crtanje” teksta