For a live sample please click here or see below the snippet
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Draw Rectangle And Fill Rectangele using Canvas</title>
<script language="javascript">
function DrawRectangle()
{
var drawingCanvas = document.getElementById('sampleCanvas');
if(drawingCanvas.getContext)
{
var context = drawingCanvas.getContext('2d');
context.clearRect(0,0,600,600);
context.lineWidth=3;
context.lineJoin="round";//bevel round meter
//context.strokeStyle="#FF0000";
context.fillStyle="#FF0000";
var w=400;
var h=300;
var t=100;
var l=100;
//context.strokeRect(l,t,w,h);
context.fillRect(l,t,w,h);
}
}
</script>
</head>
<body>
<canvas id="sampleCanvas" width="600" height="600" style="border:1px solid #000000">
<p>Your browser doesn't support canvas.</p>
</canvas>
<script>
DrawRectangle();
</script>
</body>
</html>
