Drawing a Circle with HTML5 Canvas

Drawing a circle with HTML5 canvas is fairly straight forward. The HTML5 canvas element is a powerful tool for drawing graphics on your website. In this tutorial we will demonstrate how to draw a circle in an HTML5 canvas element.

The HTML

<canvas id="theCanvas" width="200" height="200"></canvas> 

In the HTML we will define a canvas element with 200 width and 200 height.

The JavaScript

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

context.beginPath();
context.arc(100, 50, 75, 0, 2 * Math.PI, false);
context.fillStyle = 'red';
context.fill();

Here we use JavaScript to draw the circle into the canvas. In the first two lines, we find the canvas element and get the context in 2d. Once we have the context, we use the arc function to draw the circle.

The Live Demo


Share on FacebookTweet about this on TwitterShare on LinkedInShare on Google+Pin on PinterestShare on RedditShare on StumbleUponShare on TumblrDigg this

You may also like...

3 Responses

  1. good articles thanks for sharing.

  2. Happy Holi 2017 says:

    This was really an interesting topic and I kinda agree with what you have mentioned here!

  3. jackluter says:

    More helpful code and easy to understand.

Leave a Reply

Your email address will not be published. Required fields are marked *