How To draw Rectangle using HTML5 Canvas

HTML5 Canvas Rectangle tutorial will guide you about How To draw rectangle using HTML5 Canvas. Step by step code example with live demo using CodePen would explain more easily.

To draw a rectangle on html5 Canvas, We use rect()method.

This method takes four parameter.

The general form of rect() is given.

context.rect(xCoordinate,yCoordinate,width, height);


where xCoordinates is x coordinates of starting point of rectangle and yCoordinates is the y Coordinate of starting point of rectangle.

The other parameter of method are width and height of rectangle.Width shows the width of rectangle or x-axis and height show the height of rectangle or y-axis on

2d canvas.

The other properties of rect are fillStyle.fillStyle set the color for filling the inner area of rectangle,other attribute for rect is color of outer boundry line of rectangle.It is set by strokeStyle.The strokeStyle property set the color of outer boundry line.The method

stroke() draw a out line of rect.

lineWidth property set the width of outer boundry line of rect.

context has two method for setting properties of rect.

fill() method is used to fill the surface of rect,fillStyle prpoerty set the

color of fill of rect surface.

stroke() method draw outline for rect.

strokeStyle property set the color of outline and lineWidth

set the width of outline.

Drawing Recatangle using HTML5 Canvas Complete code example

==============================================================



<!DOCTYPE html>
<html>
    <head>
        <title>Drawing  rectangle on html5 Canvas</title>
    </head>
    <body>
        <canvas id ="myCanvas" width ="600" height ="500">
        </canvas>
        <script>
            var  canvas = document.getElementById("myCanvas");
            var context =canvas.getContext('2d');
                                       
            context.beginPath();
                context.rect(100, 100, 400, 200);
                         context.fillStyle = 'yellow';
                context.fill();
                context.lineWidth = 5;
                context.strokeStyle = 'black';
                context.stroke();

            
        </script>
    </body>
</html>

==========================================================

Save this file as

html5-canvas-rect.html

open the file file in browser .you will see the following figure in browser.

—————————————–

—————————————–

===============================================

Live Demo Drawing rectangle using HTML5 Canvas on codepen

===============================================

[codepen_embed height=400 theme_id=1 slug_hash=’pvwvbM’ user=’aslamwaqar’

default_tab=’html’ animations=’run’]

[/codepen_embed]

Author: Habibullah Qamar

Its me Habib Ullah Qamar working as a Lecturer (Computer Sciences) in Pakistan. I have an MS(M.Phil) degree in computer sciences with specialization in software engineering from Virtual University of Pakistan Lahore. I have an experience of more than 15 years in the filed of Computer Science as a teacher. Blog Writing is my passion. I have many blogs, This one is special made with the aim of providing 100% Free online coaching and training to the students of under-graduate and postgraduate classes. Most of the students enrolled in computer sciences, information technology, software engineering and related disciplines find it difficult to understand core concepts of programming and office automation. They find difficult in understanding and solving their assignments.

Leave a Reply

Your email address will not be published. Required fields are marked *