<canvas id="my-canvas" width="650px" height="500px">
</canvas>
let myCanvas = document.getElementById('my-canvas');

let ctx = myCanvas.getContext('2d');

let myGrad = ctx.createLinearGradient(0, 0, 0, 250);


myGrad.addColorStop(0.06,'lightpink');
myGrad.addColorStop(0.125,'pink');
myGrad.addColorStop(0.25,'red');
myGrad.addColorStop(0.35,'firebrick');
myGrad.addColorStop(0.5,'darkred');
myGrad.addColorStop(0.65,'purple');
myGrad.addColorStop(0.75,'darkslateblue');
myGrad.addColorStop(0.85,'steelblue');
myGrad.addColorStop(1.0,'lightblue');


ctx.fillStyle = myGrad;
ctx.fillRect(135, 135, 250, 250);






External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.