Quickly draw a rectangle using HTML! :: Rectangle drawing using HTML5!

Rectangle can be drawn using HTML5. Sometimes for many webpage or web application, we may need to draw rectangle. Suppose, we would highlight a part of the website, then this feature is really helpful and handy. In this page, we would learn step by step, how to draw the only built-in shape provided by the HTML5 canvas API, a rectangle.

Steps to draw a rectangle using HTML5!

Follow the following steps to draw a rectangle quickly, using only HTML:

Step 1: Open a notepad file and save it as DrawRectangleUsingHTML5.html.

Step 2: Add the basic html tags to create a html page. The basic structure of the page would look like the following:

<html>
    <head>	
    </head>


    <body>
    </body>
</html>

Step 3: Define a block to add related script to create a 2D rectangle. So, we select the <head> and </head> tags and in between insert the tags <script>and </script> for defining the 2d rectangle.

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

Draw a rectangle tutorial in action

Draw a rectangle  tutorial in action
Draw a rectangle tutorial in action

Step 4: To draw the rectangle we would use the method "rect()". And later, we would set the color to fill with the "fillStyle" property. At last, fill the shape with the "fill()" method. To do this, the code segment would look like the following:

context.rect(canvas.width / 2 -200, canvas.height / 2 -100 , 400, 200);  // define the rectangle
context.fillStyle = "red";  	// define the rectangle fill color
context.fill();					// define the way / style of the rectangle fill-up
context.lineWidth = 10;			// define the width of the rectangle
context.strokeStyle = "green";  // define the style of the stock of the rectangle
context.stroke();				// define the stock of the rectangle

Step 5: Completing the above four steps, we have to embed the canvas tag inside the body of the HTML document. So, we do by writing the following code of lines:

<canvas id="canvasForDrawingRectangle" 
		width="600" 
		height="300" 
		style="border:2px solid blue;">
</canvas>

Remember, the above code segment should be added inside the body tags of the HTML file.

Full code for Quickly drawing a rectangle using HTML5:

The complete code to draw a 2d rectangle is the following. Just copy the full code and save it and then open that any browser to see the rectangle in action. Following,this tutorial, you would able to draw any 2d rectangle to any of your website using only simply the HTML.

<html>
    <head>
        <script>
            
			// define the 2d canvas
			
			window.onload = function(){
					
                var canvas = document.getElementById("canvasForDrawingRectangle");
                var context = canvas.getContext("2d");
                
                context.rect(canvas.width / 2 -200, canvas.height / 2 -100 , 400, 200);  // define the rectangle
                context.fillStyle = "red";  	// define the rectangle fill color
                context.fill();					// define the way / style of the rectangle fill-up
                context.lineWidth = 10;			// define the width of the rectangle
                context.strokeStyle = "green";  // define the style of the stock of the rectangle
                context.stroke();				// define the stock of the rectangle
            };
			
			// end of the 2d canvas definition
        </script>
    </head>
    
	
	<body>
	
	
	<center>
        <canvas id="canvasForDrawingRectangle" 
				width="600" 
				height="300" 
				style="border:2px solid blue;">
        </canvas>
    </center>
	
	
	</body>
</html>

More by this Author


Comments

No comments yet.

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working