How to draw an oval in HTML5 canvas?



You can try to run the following code to draw an oval in HTML5 canvas −

Example

<!DOCTYPE HTML> <html>    <head>    </head>    <body>       <canvas id="newCanvas" width="450" height="300"></canvas>       <script>          // canvas          var c = document.getElementById('newCanvas');          var context = c.getContext('2d');          var cX = 0;          var cY = 0;          var radius = 40;                    context.save();          context.translate(c.width / 2, c.height / 2);          context.scale(2, 1);          context.beginPath();          context.arc(cX, cY, radius, 0, 2 * Math.PI, false);          context.restore();          context.fillStyle = '#000000';          context.fill();          context.lineWidth = 2;          context.strokeStyle = 'yellow';          context.stroke();       </script>    </body> </html>

Output

Updated on: 2021-12-16T12:13:41+05:30

961 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements