Draw Rectangle in HTML5 Canvas Tag

Filled Rectangle:

This rectangle is filled with defined color.

Source code viewer
<canvas id="canvas_filled_rectangle" width="250" height="250"></canvas>
Programming Language: XML

Javascript:

Source code viewer
var canvas_filled_rectangle = document.getElementById("canvas_filled_rectangle").getContext("2d");
 
// what color to use when filling rectangle
canvas_filled_rectangle.fillStyle = "#000";
// draw filled rectangle: fillRect(x, y, width, height)
canvas_filled_rectangle.fillRect(70, 70, 15, 15);
Programming Language: Javascript

Stroke Rectangle:

This is stroke rectangle, which means rectangle with border.

Source code viewer
<canvas id="canvas_stroke_rectangle" width="250" height="250"></canvas>
Programming Language: XML

Javascript:

Source code viewer
var canvas_stroke_rectangle = document.getElementById("canvas_stroke_rectangle").getContext("2d");
 
// what color to use for border
canvas_stroke_rectangle.strokeStyle = "#000";
// draw stroke rectangle: strokeRect(x, y, width, height)
canvas_stroke_rectangle.strokeRect(70, 70, 15, 15);
Programming Language: Javascript

Clear Rectangle:

Clear defined rectangular area.

Source code viewer
<canvas id="canvas_clear_rectangle" width="250" height="250"></canvas>
Programming Language: XML

Javascript:

Source code viewer
var canvas_clear_rectangle = document.getElementById("canvas_clear_rectangle").getContext("2d");
 
// draw stroke rectangle: clearRect(x, y, width, height)
canvas_clear_rectangle.clearRect(70, 70, 15, 15);
Programming Language: Javascript