Javascript Code to Create Drawing on HTML Canvas

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="1000" height="500" 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");
ctx.beginPath();

ctx.fillStyle="yellow";
ctx.fillRect(400,50,350,400);

ctx.fill();
ctx.stroke();

ctx.beginPath();
ctx.fillStyle="black";
ctx.arc(500,150,50,0,2*Math.PI);
ctx.stroke();
ctx.fill();

ctx.beginPath();
ctx.fillStyle="white";
ctx.arc(500,180,20,0,2*Math.PI);
ctx.stroke();
ctx.fill();

ctx.beginPath();
ctx.fillStyle="black";
ctx.arc(650,150,50,0,2*Math.PI);
ctx.stroke();
ctx.fill();

ctx.beginPath();
ctx.fillStyle="white";
ctx.arc(650,180,20,0,2*Math.PI);
ctx.stroke();
ctx.fill();

ctx.beginPath();
ctx.fillStyle="black";
ctx.fillRect(550,250,30,40,40); 
ctx.stroke();
ctx.fill();
ctx.beginPath();
ctx.fillStyle="red";
ctx.arc(580,350,30,90,2*Math.PI);
ctx.stroke();
ctx.fill();
</script> 

</body>
</html>

Your browser does not support the HTML 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

Change Background Color using onkeydown keyboard event

<html> <head> Javascript Events</head> <body> <h2> Enter something here</h2> <input type="text" id="input1" onkeydown="keydownevent()"/>  <p id="display1"> <p id="display2"> <p id="display3"> <p id="display4"> <p id="display5"> <script> <!-- function keydownevent() { document.getElementById("input1");                 n=document.getElementById("input1").value;                 document.getElementById("display1").style.color="white";                   switch(Number(n))                  {                     case 1: document.getElementById("display1").style.background="pink";                       document.getElementByI...
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