×
Namespaces

Variants
Actions
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
Article
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

Introduction

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.

Prerequisites

HTML5 supported browser.

Example code

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

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