HTML5 canvas rectangle example using rect() and fillRect(). This example uses canvas path, lineWidth, lineStyle, fillStyle.
<canvas id="mycanvas1" width="200" height="100"
style="background-color:lightgray;">
</canvas>
<script type="text/javascript">
window.addEventListener("load", draw);
function draw() {
var canvas = document.querySelector('#mycanvas1');
var context = canvas.getContext('2d');
context.beginPath();
context.lineWidth="5";
context.strokeStyle="green";
context.rect(10,10,60,60);
context.stroke();
context.closePath();
context.fillStyle = "lightgreen";
context.fillRect(10,10,60,60);
}
</script>
