Property:
addColorStop:
0.3,'red'
0.4,'red'
0.5,'red'
0.6,'red'
0.6,'#0000FF'
0.6,'orange'
0.6,'rgb(0,255,255)'
Canvas:
your browser does not support the canvas tag
Code:
const c = document.getElementById('myCanvas');
const ctx = c.getContext('2d');
var grd = ctx.createLinearGradient(0, 0, 150, 0);
grd.addColorStop(
0.3, 'red')
;
grd.addColorStop(0.7, 'green');
ctx.fillStyle = grd;
ctx.fillRect(0, 0, 150, 100);
Click the property values above to see the result
W3Schools.com
- Play it