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>