Posts

Showing posts from May, 2021

Javascript Code : Random Display of Shapes with Different Colors using fillRect , clearRect, For Loop , Styling Buttons using Javascript

 <!DOCTYPE html> <html> <head>  <title> Javascript Code : Random Display of Shapes with Different Colors using fillRect , clearRect, For Loop , Styling Buttons using Javascript </title> </head> <body> <canvas id="myCanvas" width="1000" height="300" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag.</canvas><br> Count the shapes  <input type="number" id="answer" > </input> <button id="colors" onclick="colors()" onmouseover="colors()" >COLORS </button> <button id="eraser" onclick="eraser()" onmouseover="eraser()" >Next </button> <script> function colors() { var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); x=Math.round(Math.random()*10+1); var score=0; for(f=1; f<=x;f++) { swit...
Post a Comment
Read more

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....
Post a Comment
Read more

JAVASCRIPT CODE : RANDOM GRADIENT TEXT COLORS ON CANVAS , USING fillText , setfillStyle ,forLoop, 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> <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    }  ctx.font = "20px Georgia"; ctx.fillText("Hello World!", 10, 50); ctx.font = "50px Verdana"; // Create gradient var gradient = ctx.createLinearGradient(10, 50,canvas.width, 1...
Post a Comment
Read more

Javascript Code : Guessing Game using Javascript CSS/HTML Styles , If Else and Switch case , Math.random

Image
<html> <head> Javascript Events</head> <body> <h2> Enter a guess number   </h2> <input type="text" id="input1" onkeydown="keydownevent()"/>  <p id="display"> <p id="display2"> <script> <!-- function keydownevent() { document.getElementById("input1");                 n=document.getElementById("input1").value;                 document.getElementById("display").style.color="white";                   x=Math.floor(Math.random()*5 +1);                                           switch(Number(n))                  {                     case 1: document.getElementById("display").style.back...
Post a Comment
Read more

Javascript Code : Draw on HTML Canvas using Javascript - Circle, Arc, Rectangle, Square , Lines , Shapes , BUtton Controlled Drawing

<html> <head> <title> Javascript Code  : Draw on HTM Canvas using Javascript - Circle, Arc,  Rectangle, Square , Lines , Shapes , BUtton Controlled Drawing   </title>   </head>     <body> <canvas height="500" id="myCanvas" style="border: 1px solid #d3d3d3;" width="1000"> Your browser does not support the HTML canvas tag.</canvas> <br /> <button id="rectangle" onclick="Rectangle()"> Rectangle </button> <button id="cirle" onclick="Circle()"> Cirle </button> <button id="line" onclick="Line()">Line </button> <button id="clear" onclick="Erase()"> Clear </button> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); function Rectangle() { // Create gradient var grd = ctx.createLinearGradient(50,100,5,150,60,60); grd.ad...
Post a Comment
Read more