x
<html><body><h1>HTML5 Canvas linearGradient()</h1><canvas id="myCanvas" width="300" height="150" style="border:1px solid grey;">Sorry, your browser does not support canvas.</canvas><script>const c = document.getElementById("myCanvas");const ctx = c.getContext("2d");// Create linear gradientconst grad=ctx.createLinearGradient(0,0,280,0);grad.addColorStop(0, "lightblue");grad.addColorStop(0.5, "purple");grad.addColorStop(1, "darkblue"); // Fill rectangle with gradientctx.fillStyle = grad;ctx.fillRect(10,10,280,130);</script></body></html>