Create a House with HTML5

HTML5 is a new horizon for web design and web development. It's canvas element help you create a beautiful graphic design without photoshop. In the future, people will make their dynamic and beautiful website by using HTML5. Now we make our House model by using it. Let's take a look at the designdesigne of home model.

All Project Code:

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
        background:#099;
         }
      #myHouse {
        border: 1px solid #9C9898;
        margin:15px;
        background:#F99;
      }
      h2{color:#fff;}
    </style>
    <script>
      window.onload = function() {
        var canvas = document.getElementById("myHouse");
        var context = canvas.getContext("2d");
        //left roof
        context.beginPath();
        context.moveTo(100,100);
        context.lineTo(300, 10);
        context.stroke();        
        //right roof
        context.beginPath();
        context.moveTo(300,10);
        context.lineTo(500, 100);
        context.stroke();        
        // roof ground
        context.beginPath();
        context.moveTo(100,100);
        context.lineTo(500, 100);
        context.stroke();        
        //left side
        context.beginPath();
        context.moveTo(200,100);
        context.lineTo(200, 180);
        context.stroke();        
        //right side
        context.beginPath();
        context.moveTo(400,100);
        context.lineTo(400, 180);
        context.stroke();        
        //top floor
        context.beginPath();
        context.moveTo(100,180);
        context.lineTo(500, 180);
        context.stroke();        
        //ground floor
        context.beginPath();
        context.moveTo(100,198);
        context.lineTo(500, 198);
        context.stroke();        
        //floor left side
        context.beginPath();
        context.moveTo(100,180);
        context.lineTo(100, 198);
        context.stroke();        
        //floor rite side
        context.beginPath();
        context.moveTo(500,180);
        context.lineTo(500, 198);
        context.stroke();          
        //door left side
        context.beginPath();
        context.moveTo(260,110);
        context.lineTo(260, 170);
        context.stroke();        
        //door right side
        context.beginPath();
        context.moveTo(340,110);
        context.lineTo(340, 170);
        context.stroke();        
        //door top
        context.beginPath();
        context.moveTo(260,110);
        context.lineTo(340, 110);
        context.stroke();        
         //door down
        context.beginPath();
        context.moveTo(260,170);
        context.lineTo(340, 170);
        context.stroke();
      };
    </script>
  </head>
  <body>
  <center>
    <canvas id="myHouse" width="578" height="300"></canvas>
    <h2> A Simple House made by HTML 5.</h2>
    </center>
  </body> 
</html>

Now open Notepad copy code and paste. Then Click File>Save As and give File name index.html. Now open index.html file by using your web browser and you showed like the below image.

Project Analysis:

** We're designing our canvas in HTML by using..

<canvas id="myHouse" width="578" height="300"></canvas>

We determine canvas height and weight by using it. Canvas element or Canvas tag <canvas></canvas> work like other html tags <div><p> but here only difference it's executes by using javascript code. To executed id="myhouse", we're used below of the javascript code.

      window.onload = function() {
        var canvas = document.getElementById("myHouse");
        var context = canvas.getContext("2d");

** We are using 13 lines to make our house. To create each of the lines, we use similar script in all code. Here's the script..

context.beginPath(); 
context.moveTo(100,100); 
context.lineTo(300, 10); 
context.stroke();

context.beginPath();

Drawing of the path that has been used.

 context.moveTo(100,100);

It is presented in a simple way, context.moveTo(100,100);'s starting point is the coordinate of each line has been set. Coordinate can be calculated from the left side of the top corner.

 context.lineTo(300, 10);

It is presented in a simple way, context.lineTo(300,10);'s ending point is the coordinate of each line has been set. Coordinate can be calculated from the left side of the top corner.

 context.stroke();

Determine is the color for each line. Here we do not specify any color, so it's looking the black. But if you want to add color just used below of the code to delete the current context.stroke();like..

         // left roof
        context.strokeStyle = '#292929';
        context.stroke();

It's changed your left roof color. At the same time, you can add more color in your house to using this method.
Thanks to read our full house project tutorial. Wait for our next project.

Post Tags:

HTML5

Jillur Rahman

I'm Jillur Rahman. A full time web designer. I enjoy to make modern template. I love create blogger template and write about web design, blogger. Now I'm working with Themeforest. You can buy our templates from Themeforest.