Skip to main content

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, 

Labels:

Popular posts from this blog

Design Marathi website Using HTML CSS

          Design Marathi website Using HTML CSS,मराठी वेबसाईट designing HTML ,step by step Marathi website, how to display Marathi content in your website, Design Marathi website step by step , Marathi website using HTML and CSS, How To Design website using different Languages  Design Marathi website Using HTML CSS, Design Marathi website Using PHP, Design Marathi website Using JSP, Design Marathi website Using ASP, Design Marathi website Using C# Dot Net, Design Marathi website Using Vb Dot Net, मराठी वेबसाईट मराठी वेबसाईट बनवन अगदी सोप आहे मी या ब्लॉग मध्ये दिलेल्या स्टेप्स वापरून तुम्ही काही क्षणात मराठी वेब पेज तयार करू शकता  Design Marathi website Using HTML CSS,मराठी वेबसाईट designing HTML ,step by step Marathi website, how to display Marathi content in your website, Design Marathi website step by step , Marathi website using HTML and CSS, How To Design website using different Languages    Design Marathi website U
Read more

Create HTML CSS javascript News Box , HTML CSS News Slider Download

Create HTML CSS javascript News Box , HTML CSS News Slider Download, HTML News Box For Your Website Free Download, java script news box For your Website, HTML CSS News Box Tutorial, HTML CSS News Box Example With Source code, HTML CSS Link Slider, HTML Slider Menu ,java script news box For your Website, HTML News box source Code example, News Slider   Here Is Example Of News Box slider for Your Website you can use it wiht PHP, ASP, ASP.NET, JSP,HTML 1.HTML Code  Save this code as index.HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title itemprop="name"></TITLE> <meta name="description" itemprop="description" content=""/> <META NAME="Keywords" CONTENT=""/>  <meta name=&quo
Read more

rowspan and colspan in html table

html table rowspan colspan tutoral, rowspan and colspan in html table, html table , html table video tutorial , html table with colspan and rowspan  html table rowspan colspan tutoral, rowspan and colspan in html table, html table , html table video tutorial , html table with colspan and rowspan  saving details Month Savings Savings for holiday! January $100 $50 February $80 click here to download html table colspan rowspan tutorial
Read more