Rotate your phone or change to desktop for better experience

Rotate your phone or change to desktop for better experience

7. Program to demonstrate Gradients using HTML Canvas.

kiri August 08, 2023

 

LINEAR GRADIENT

<!DOCTYPE html>

<html>

<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">

Your browser does not support the HTML canvas tag.</canvas>

<script>

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

// Create gradient

var grd = ctx.createLinearGradient(0,0,200,0);

grd.addColorStop(0,"red");

grd.addColorStop(1,"yellow");

// Fill with gradient

ctx.fillStyle = grd;

ctx.fillRect(10,10,150,80);

</script>

</body>

</html>

 

RADIAL GRADIENT

<!DOCTYPE html>

<html>

<body>

<h1>HTML5 Canvas</h1>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid grey;"></canvas>

<script>

const c = document.getElementById("myCanvas");

const ctx = c.getContext("2d");

// Create gradient

const grd = ctx.createRadialGradient(75,50,5,90,60,100);

grd.addColorStop(0,"red");

grd.addColorStop(1,"white");

// Fill with gradient

ctx.fillStyle = grd;

ctx.fillRect(10,10,150,80);

</script>

</body>

</html>

Post a Comment

0 Comments