Try it Yourself: Canvas Linear Gradient

Canvas Linear Gradient

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="340" height="200" style="border:1px solid #ccc;"></canvas>

<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

// Line runs left-to-right across the rectangle
const gradient = ctx.createLinearGradient(0, 0, 300, 0);
gradient.addColorStop(0, "#ff512f");
gradient.addColorStop(1, "#f09819");

ctx.fillStyle = gradient;
ctx.fillRect(20, 20, 300, 150);
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="340" height="200" style="border:1px solid #ccc;"></canvas>

<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

// Line runs left-to-right across the rectangle
const gradient = ctx.createLinearGradient(0, 0, 300, 0);
gradient.addColorStop(0, "#ff512f");
gradient.addColorStop(1, "#f09819");

ctx.fillStyle = gradient;
ctx.fillRect(20, 20, 300, 150);
</script>

</body>
</html>