Draw Rectangle in Canvas HTML5.


Write the javascript part in the head section of the html page.

<script>
function Draw_Rectangle(Canvas, Left_Position, Top_Position, Width, Height, Line_Color, LINE_WIDTH, FillColor) {
            var Context2d = Canvas.getContext('2d');
            if (Context2d) {
                //Draw Rectangle
                Context2d.strokeStyle = Line_Color;
                Context2d.lineWidth = LINE_WIDTH;
                Context2d.fillStyle = FillColor;
                Context2d.fillRect(Left_Position, Top_Position, Width, Height);
                Context2d.strokeRect(Left_Position, Top_Position, Width, Height);               
        }
</script>


Write the html part in the body section of the html page.

<canvas id='myCanvas' width='1180' height='1020'></canvas>
<script>Draw_Rectangle(myCanvas, 100, 100, 100, 50.00, '#FFFFFF',1, '#6ed629');</script>

HTML5 Canvas Rectangle

HTML5 Canvas Rectangle