Revision as of 12:33, 19 December 2012 by Vaishali Rawat (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

HTML5 - How to draw a circle

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Created: Maveric (30 Jun 2011)
Last edited: Vaishali Rawat (19 Dec 2012)

This article explains how to create a circle using the graphics capabilities of HTML5


Drawing a circle with HTML5 is easy. What you need, is to instantiate the graphics context and then use the arc method to draw a circle. The code below first sets the fillStyle color, starts the drawing operations.


HTML5 supported browser.

Example code

Change the values to see the difference. This code will create a black ball.

<canvas id="myCanvas" width="800" height="600">
Your Browser does not support the HTML5 CANVAS Property. //displays on a non-HTML5 supporting browser.
<script type="text/javascript">
var myCanvas = document.getElementById("myCanvas");
var myContext = myCanvas.getContext("2d");
var circleCenterX = 320;
var circleCenterY = 200;
var r = 200;
myContext.arc(circleCenterX, circleCenterY, r, 0, 6 * Math.PI, false);
myContext.strokeStyle = "yellow";
This page was last modified on 19 December 2012, at 12:33.
51 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.


Thank you!

We appreciate your feedback.