Draw Oval in Canvas HTML5.


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

<script>
    function Draw_Oval(Canvas, Left_Position, Top_Position, Width, Height, Line_Color, LINE_WIDTH, FillColor) {
        var Context2d = Canvas.getContext('2d');
        var centerX = Left_Position;
        var centerY = Top_Position;
        var radius = 50;       
        Context2d.save();       
        Context2d.translate(Canvas.width / 2, Canvas.height / 2);       
        Context2d.scale(Width, Height);       
        Context2d.beginPath();
        Context2d.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);      
        Context2d.restore();       
        Context2d.fillStyle = FillColor;
        Context2d.fill();
        Context2d.lineWidth = LINE_WIDTH;
        Context2d.strokeStyle = Line_Color;
        Context2d.stroke();
    }
</script>


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

<canvas id='Canvas' width='500' height='500'></canvas>
<script>Draw_Oval(Canvas, 0, 0, 1, 1, '#000000', 2, '#6ed629');</script>


HTML5 Canvas Oval

HTML5 Canvas Oval