Draw Rectangle HTML5 Canvas Demo
HTML5 Canvas provides 2d drawing surface using Javascript for web programmers. Canvas API and canvas element objects can be created and modified using Javascript easily which enables a 2d drawing space and animation capabilities for HTML developers. In this Canvas example page, you will see how to draw rectangle in canvas element using Javascript. This Canvas tutorial show to draw rectangle on canvas, paint it and clear it as examples.
If you enter following canvas dimensions, width 300 and height 150 then press "Set New Canvas Dimensions", a new canvas element with specified dimensions will be drawn dynamically in HTML page. You can change the size and press the button again to draw a new canvas instead of the previous one. Please note that since I defined a default style for canvas with border color in black style, the borders of the canvas will be easily seen in HTML page.
The following Canvas sample is created using the above dimensions and color styles. First press "Set New Canvas Dimensions". Then enter fill style and stroke style colors. Then press strokeRect() and fillRect() methods for drawing dynamically in HTML5 Canvas element using Javascript.
Now you can create your canvas in desired dimensions, draw rectangle object in HTML5 canvas element and paint it with color you want using Javascript and Canvas object methods.
Canvas Dimension:
Width (between 1-590):
Height (between 1-590):
Javascript code for HTML5 Canvas rezise
var canvas = document.getElementById("html5canvas");
canvas.width = document.getElementById("rangeWidth").value;
canvas.height = document.getElementById("rangeHeight").value;
Rectangle Dimension:
Width (between 1-590):
Height (between 1-590):
Choose fill color : (ex. AABB00 )
Choose stroke color:
Run HTML5 Canvas fillRect() method of context object to draw a rectangle and fill inside with a color defined with current fillStyle.
Javascript code for HTML5 fillRect() method
var canvas = document.getElementById("html5canvas");
var context = canvas.getContext("2d");
var x = 10; // x-coordinate
var y = 10; // y-coordinate
var width = document.getElementById("rectangleWidth").value; // width
var height = document.getElementById("rectangleHeight").value; // height
var color = document.getElementById("fillcolor").value;
if (color.substring(1,1) != "#") {
color = '#' + color;
}
context.fillStyle = color;
context.fillRect(x, y, width, height);
Run HTML5 Canvas strokeRect() method of context object to draw a rectangle and stroke it using the current style parameters like strokeStyle, lineWidth and lineJoin.
The rectangle is drawn in canvas starting at (x,y) coordinates referenced top-left corner of the canvas with dimensions width and height passed to strokeRect() method as arguments.
Javascript code for HTML5 strokeRect() method
var canvas = document.getElementById("html5canvas");
var context = canvas.getContext("2d");
var x = 10; // x-coordinate
var y = 10; // y-coordinate
var width = document.getElementById("rectangleWidth").value; // width
var height = document.getElementById("rectangleHeight").value; // height
var color = document.getElementById("strokecolor").value;
if (color.substring(1, 1) != "#") {
color = '#' + color;
}
context.strokeStyle = color;
context.strokeRect(x, y, width, height);
Run HTML5 Canvas clearRect() method of context object to clear rectangle shaped area in canvas starting from (x,y) coordinated referenced to top-left corner of the canvas.
The cleared rectangle area width and height is also defined in the clearRect() method call as arguments.
The cleared are is filled with transparent black color.
Javascript code for HTML5 Canvas clear
var canvas = document.getElementById("html5canvas");
var context = canvas.getContext("2d");
var x = 0; // x-coordinate
var y = 0; // y-coordinate
var width = canvas.width; // canvas width
var height = canvas.height; // canvas height
context.clearRect(x, y, width, height);
Run HTML5 Canvas rect() method to create a closed subpath starting from (x,y) point and in a rectangle shaped with dimensions defined with width and height rect() method arguments.
After closePath is defined on canvas context object, call stroke() method to give color to the rectangle edges (simply draw rectangle on canvas)
Javascript code for Canvas rect() and stroke() methods
var canvas = document.getElementById("html5canvas");
var context = canvas.getContext("2d");
var x = 10; // x-coordinate
var y = 10; // y-coordinate
var width = document.getElementById("rectangleWidth").value; // width
var height = document.getElementById("rectangleHeight").value; // height
context.rect(x,y,width,height);
var color = document.getElementById("strokecolor").value;
if (color.substring(1, 1) != "#") {
color = '#' + color;
}
context.strokeStyle = color;
context.stroke();
Run HTML5 Canvas rect() method to create a closed subpath starting from (x,y) point and in a rectangle shaped with dimensions defined with width and height rect() method arguments.
After closePath is defined on canvas context object, call fill() method to give color to the rectangle itself (simply fill rectangle on canvas)
Javascript code for Canvas rect() and fill() methods
var canvas = document.getElementById("html5canvas");
var context = canvas.getContext("2d");
var x = 10; // x-coordinate
var y = 10; // y-coordinate
var width = document.getElementById("rectangleWidth").value; // width
var height = document.getElementById("rectangleHeight").value; // height
context.rect(x, y, width, height);
var color = document.getElementById("fillcolor").value;
if (color.substring(1, 1) != "#") {
color = '#' + color;
}
context.fillStyle = color;
context.fill();