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
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>