<script type="text/javascript">

window.onload=function(){

var canvas=document.getElementById("canvas");

canvas.width=800;

canvas.height=800;

var context=canvas.getContext("2d");

drawRect(context,100,100,400,400,"#046","pink");

drawRect1(context,300,300,300,300,"#000","red");

drawRect2(context,400,400,300,300,"#abc","blue");

}

function drawRect(cxt,x,y,width,height,borderColor,fillColor){

cxt.beginPath();

cxt.moveTo(x,y);

cxt.lineTo(x+width,y);

cxt.lineTo(x+width,y+height);

cxt.lineTo(x,y+height);

cxt.closePath();

cxt.lineWidth = borderWidth;

cxt.fillStyle = fillColor;

cxt.strokeStyle = borderColor;

cxt.fill();

cxt.stroke();

}

function drawRect1(cxt,x,y,width,height,borderColor,fillColor){

cxt.beginPath();

cxt.rect(x,y,width,height);

cxt.closePath();

cxt.lineWidth=borderWidth;

cxt.fillStyle=fillColor;

cxt.strokeStyle=borderColor;

cxt.fill();

cxt.stroke();

}

function drawRect2(cxt,x,y,width,height,borderColor,fillColor){

cxt.lineWidth=borderWidth;

cxt.fillStyle=fillColor;

cxt.strokeStyle=borderColor;

cxt.fillRect(x,y,width,height);

cxt.strokeRect(x,y,width,height);

}

</script>