Total Pageviews

Thursday, April 23, 2015

HTML5 Canavas Draw Home Tutorial

 HTML5 CANVAS EXAMPLE DOWNLOAD, HTML 5 Canvas Tutorial, HTML5 Canvas Basic, HTML 5 Canvas Assignment To Draw Home, HTML5 Canvas Tutorial to Draw Home, HTML Canvas tutorial to draw house, 

 












 HTML5 EXAMPLE TO DRAW HOUSE  SAVE FOLLOWING CODE USING HOUSE.HTML

 <!DOCTYPE html>
<html lang="en">
<html>
<head>
<style>
#myCanvas{
           background-color:pink;
       border:2px solid black;
       width:850px;
           height:800px;
         }
</style>
</head>
<body>
<canvas id="myCanvas">
 browser not support
</canvas>
<script>
  var c=document.getElementById("myCanvas");
  var ctx=c.getContext("2d");
  ctx.moveTo(50,70);
  ctx.lineTo(50,115);

  ctx.moveTo(60,70);
  ctx.lineTo(60,115);

  ctx.moveTo(70,80);
  ctx.lineTo(70,105);

  ctx.moveTo(85,80);
  ctx.lineTo(85,105);

  ctx.moveTo(87,90);
  ctx.lineTo(87,95);

  ctx.moveTo(83,90);
  ctx.lineTo(83,95);

  ctx.moveTo(100,80);
  ctx.lineTo(100,105);

  ctx.moveTo(70,80);
  ctx.lineTo(100,80);

  ctx.moveTo(70,83);
  ctx.lineTo(100,83);

  ctx.moveTo(70,102);
  ctx.lineTo(100,102);

  ctx.moveTo(70,105);
  ctx.lineTo(100,105);

  ctx.moveTo(110,70);
  ctx.lineTo(110,115);

  ctx.moveTo(120,70);
  ctx.lineTo(120,115);

  ctx.moveTo(125,75);
  ctx.lineTo(125,115);

  ctx.moveTo(165,75);
  ctx.lineTo(165,115);

  ctx.moveTo(125,75);
  ctx.lineTo(165,75);

  ctx.moveTo(144,75);
  ctx.lineTo(144,115);

  ctx.moveTo(147,75);
  ctx.lineTo(147,115);

  ctx.moveTo(125,85);
  ctx.lineTo(165,85);

  ctx.moveTo(125,100);
  ctx.lineTo(165,100);

  ctx.moveTo(190,80);
  ctx.lineTo(190,105);

  ctx.moveTo(210,80);
  ctx.lineTo(210,105);

  ctx.moveTo(208,90);
  ctx.lineTo(208,95);

  ctx.moveTo(212,90);
  ctx.lineTo(212,95);

  ctx.moveTo(230,80);
  ctx.lineTo(230,105);

  ctx.moveTo(190,80);
  ctx.lineTo(230,80);

  ctx.moveTo(190,83);
  ctx.lineTo(230,83);

  ctx.moveTo(190,105);
  ctx.lineTo(230,105);

  ctx.moveTo(190,102);
  ctx.lineTo(230,102);

  ctx.moveTo(170,70);
  ctx.lineTo(170,115);

  ctx.moveTo(180,70);
  ctx.lineTo(180,115);

  ctx.moveTo(240,70);
  ctx.lineTo(240,115);

  ctx.moveTo(250,70);
  ctx.lineTo(250,115);

  ctx.moveTo(30,70);
  ctx.lineTo(270,70);

  ctx.moveTo(30,115);
  ctx.lineTo(270,115);

  ctx.moveTo(30,130);
  ctx.lineTo(270,130);

  ctx.moveTo(30,50);
  ctx.lineTo(270,50);

  ctx.moveTo(30,50);
  ctx.lineTo(30,70);

  ctx.moveTo(40,50);
  ctx.lineTo(40,70);

  ctx.moveTo(50,50);
  ctx.lineTo(50,70);

  ctx.moveTo(60,50);
  ctx.lineTo(60,70);

  ctx.moveTo(70,50);
  ctx.lineTo(70,70);

  ctx.moveTo(75,30);
  ctx.lineTo(75,70);

  ctx.moveTo(80,50);
  ctx.lineTo(80,70);

  ctx.moveTo(85,40);
  ctx.lineTo(85,70);

  ctx.moveTo(90,50);
  ctx.lineTo(90,70);

  ctx.moveTo(100,50);
  ctx.lineTo(100,70);

  ctx.moveTo(105,40);
  ctx.lineTo(105,70);

  ctx.moveTo(85,40);
  ctx.lineTo(105,40);

  ctx.moveTo(110,50);
  ctx.lineTo(110,70);

  ctx.moveTo(120,50);
  ctx.lineTo(120,70);

  ctx.moveTo(125,30);
  ctx.lineTo(125,70);

  ctx.moveTo(30,115);
  ctx.lineTo(30,130);

  ctx.moveTo(270,115);
  ctx.lineTo(270,130);

  ctx.moveTo(30,50);
  ctx.lineTo(75,45);

  ctx.moveTo(204,45);
  ctx.lineTo(240,45);

  ctx.moveTo(240,45);
  ctx.lineTo(270,50);

  ctx.moveTo(69,35);
  ctx.lineTo(98,15);

  ctx.moveTo(70,35);
  ctx.lineTo(99,15);

  ctx.moveTo(98,15);
  ctx.lineTo(130,35);

  ctx.moveTo(99,15);
  ctx.lineTo(132,35);

  ctx.moveTo(98,15);
  ctx.lineTo(180,15);

  ctx.moveTo(180,15);
  ctx.lineTo(210,35);

  ctx.moveTo(123,33);
  ctx.lineTo(207,33);

  ctx.moveTo(130,50);
  ctx.lineTo(130,70);

  ctx.moveTo(140,50);
  ctx.lineTo(140,70);

  ctx.moveTo(150,50);
  ctx.lineTo(150,70);

  ctx.moveTo(160,50);
  ctx.lineTo(160,70);

  ctx.moveTo(170,50);
  ctx.lineTo(170,70);

  ctx.moveTo(180,50);
  ctx.lineTo(180,70);

  ctx.moveTo(190,50);
  ctx.lineTo(190,70);

  ctx.moveTo(203,30);
  ctx.lineTo(203,70);

  ctx.moveTo(200,50);
  ctx.lineTo(200,70);

  ctx.moveTo(210,50);
  ctx.lineTo(210,70);

  ctx.moveTo(220,50);
  ctx.lineTo(220,70);

  ctx.moveTo(230,50);
  ctx.lineTo(230,70);

  ctx.moveTo(240,50);
  ctx.lineTo(240,70);

  ctx.moveTo(250,50);
  ctx.lineTo(250,70);

  ctx.moveTo(260,50);
  ctx.lineTo(260,70);

  ctx.moveTo(270,50);
  ctx.lineTo(270,70);

  ctx.moveTo(30,700);
  ctx.lineTo(30,850);

  ctx.strokeStyle="black";

  ctx.shadowColor="black";
  ctx.shadowBlur="5";
  ctx.shadowOffSet="-5";
 
  ctx.stroke();
</script>
<br>
<b>Sayali Ashok Bhore<br>
MCA-II,<br>
IMS College,Ahmednagar</b>
</body>
</html>

Click TO Download Canvas Tutorial To Draw HOUSE










 
 HTML5 EXAMPLE  TO DRAW SWEET HOME SAVE FOLLOWING CODE USING
SWEET HOME.HTML

<!DOCTYPE html>
<html lang="en">
<html>
<head>
<style>
#myCanvas{
           background-color:pink;
       border:2px solid black;
       width:800px;
           height:600px;
         }
</style>
</head>
<body>
<canvas id="myCanvas">
 browser not support
</canvas>
<script>
  var c=document.getElementById("myCanvas");
  var ctx=c.getContext("2d");
  ctx.moveTo(70,30);
  ctx.lineTo(10,60);

  ctx.moveTo(70,30);
  ctx.lineTo(11,60);

  ctx.moveTo(70,30);
  ctx.lineTo(12,60);

  ctx.moveTo(70,30);
  ctx.lineTo(13,60);

  ctx.moveTo(70,30);
  ctx.lineTo(125,60);

  ctx.moveTo(70,30);
  ctx.lineTo(126,60);

  ctx.moveTo(70,30);
  ctx.lineTo(127,60);

  ctx.moveTo(70,30);
  ctx.lineTo(128,60);

  ctx.moveTo(70,30);
  ctx.lineTo(190,30);

  ctx.moveTo(190,30);
  ctx.lineTo(250,60);

  ctx.moveTo(125,60);
  ctx.lineTo(250,60);

  ctx.moveTo(116,55);
  ctx.lineTo(241,55);

  ctx.moveTo(118,57);
  ctx.lineTo(243,57);

  ctx.moveTo(30,50);
  ctx.lineTo(30,125);

  ctx.moveTo(110,51);
  ctx.lineTo(110,125);

  ctx.moveTo(30,125);
  ctx.lineTo(110,125);

  ctx.moveTo(230,60);
  ctx.lineTo(230,120);

  ctx.moveTo(110,125);
  ctx.lineTo(230,120);

  ctx.moveTo(50,75);
  ctx.lineTo(50,125);

  ctx.moveTo(90,75);
  ctx.lineTo(90,125);

  ctx.moveTo(50,75);
  ctx.lineTo(90,75);

  ctx.moveTo(150,75);
  ctx.lineTo(190,75);

  ctx.moveTo(150,75);
  ctx.lineTo(150,95);

  ctx.moveTo(190,75);
  ctx.lineTo(190,95);

  ctx.moveTo(150,95);
  ctx.lineTo(190,95);

  ctx.moveTo(160,75);
  ctx.lineTo(160,95);

  ctx.moveTo(170,75);
  ctx.lineTo(170,95);

  ctx.moveTo(180,75);
  ctx.lineTo(180,95);

  ctx.moveTo(50,125);
  ctx.lineTo(70,115);


  ctx.moveTo(50,75);
  ctx.lineTo(70,85);

  ctx.moveTo(70,115);
  ctx.lineTo(70,85);

  ctx.moveTo(62,100);
  ctx.lineTo(70,100);

  ctx.moveTo(63,100);
  ctx.lineTo(71,100);

  ctx.moveTo(66,100);
  ctx.lineTo(66,103);

  ctx.moveTo(51,75);
  ctx.lineTo(51,125);


  ctx.strokeStyle="black";

  ctx.shadowColor="blue";
  ctx.shadowBlur="10";
  ctx.shadowOffSet="-20";

  ctx.font="15px Monotype Corsiva";
  ctx.strokeText("Sweet Home",34,60);

 
  ctx.stroke();
</script>
<br>
<b>Sayali Ashok Bhore<br>
MCA-II,<br>
IMS College,Ahmednagar</b>
</body>
</html>






Assinement By: 

Sayali Bhore MCA (IMSCDR, Ahmednagar)

HTML5CSS3 Session 2015


Click Here To Download Canvas Sweet Home Tutorial with soource code

 HTML5 CANVAS EXAMPLE DOWNLOAD, HTML 5 Canvas Tutorial, HTML5 Canvas Basic, HTML 5 Canvas Assignment To Draw Home, HTML5 Canvas Tutorial to Draw Home, HTML Canvas tutorial to draw house, 

Popular Posts

Follow by Email