HTML5 - How to draw a circle
Article Metadata
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>
(no comments yet)