JAVASCRIPT code : Random Text Colors on Canvas , Random Button Colors using fillText, setfillStyle ,Math.random

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas><br>
<button id="colors" onclick="colors()" onmouseover="colors()" >COLORS </button>
<script>
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
  

} 
document.getElementById("colors").style.backgroundColor=c;
document.getElementById("colors").style.color="white";
document.getElementById("colors").style.width="200px";
document.getElementById("colors").style.height="100px";



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>

Your browser does not support the HTML5 canvas tag.

Comments

Post a Comment

Popular posts from this blog

Javascript Code using getElementById and If Else Statement

  <!DOCTYPE html> <html> <head> <title> Form Elements and Attributes </title> <style> //format and styles div { margin-bottom: 10px; } label { display: inline-block; width: 200px; } fieldset { background: #e1eff2; } legend { padding: 20px 0; font-size: 20px; } </style> <body> <body> <h1> Determine Age Group </h1> <p> Enter your details : </p> <fieldset> <label> Enter your name </label> <input type =" text " onfocus =" this.value='' " name =" fname " id =" fname " value ="" /> <br> <!-- create input text box for name --> <label> Enter your age </label> <input type =" number " onfocus =" this.value='' " name =" age " i...
Read more

Window Screen Properties

 <!DOCTYPE html> <html> <body> <p id="demo"></p> <p id="demo1"></p> <p id="demo2"></p> <p id="demo3"></p> <p id="demo4"></p> <p id="demo5"></p> <script> document.getElementById("demo").innerHTML =  " screen width is " + screen.Width; document.getElementById("demo1").innerHTML =  "Available screen width is " + screen.availWidth; document.getElementById("demo2").innerHTML =  " screen height is " + screen.height; document.getElementById("demo3").innerHTML =  "Available screen height is " + screen.availHeight; document.getElementById("demo4").innerHTML =  " screen Depth is " + screen.colorDepth; document.getElementById("demo5").innerHTML =  "screen pixelDepth is " + screen.pixelDepth; </script> </body> <...
Read more