JAVASCRIPT CODE : RANDOM GRADIENT TEXT COLORS ON CANVAS , USING fillText , setfillStyle ,forLoop, Math.random

<!DOCTYPE html>

<html>

<body>

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

<button id="colors" onclick="colors()" onmouseover="colors()" >COLORS </button>

function colors()

{

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

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

for(f=1; f<=10;f++)

{

x=Math.round(Math.random()*5);

switch(x)

{

case 0: c="red"; break

case 1: c="green";break

case 2: c="blue"; break

case 3: c="yellow";break

case 4: c="orange"; break

case 4: c="pur"; break

}

ctx.font = "20px Georgia";

ctx.fillText("Hello World!", 10, 50);

ctx.font = "50px Verdana";

// Create gradient

var gradient = ctx.createLinearGradient(10, 50,canvas.width, 100);

gradient.addColorStop("0", c);

gradient.addColorStop("0.5", "black");

gradient.addColorStop("1.0", "white");

// Fill with gradient

ctx.fillStyle = gradient;

ctx.fillText("Big smile!", 10, 90);

}

</script>

</body>

</html>

Javascript