Four Ways to Draw a Circle in-BrowserDBS Interactive DBS Interactive
At first glance, learning to program a circle in a browser is a task that to many would seem senseless. But believe it or not, creating a circle in a browser is a task that offers a lot of value to web designers of all skill levels.
Why take the time to render a circle with code, when we could simply use an image editing program like Photoshop to create the circle?
By rendering the circle in-browser, as opposed to embedding an image or coding it in flash, we ensure that it will be accessible from all devices (including Apple’s) and that there will be no loss in quality if the circle increases in size. Much like vector files used in Illustrator, with many of these methods, the circle can scale as the size of the browser increases. This becomes very useful in Mobile or Ipad application development, HTML5 games, and is a good base point for learning how to draw more complex objects.
Enough with the small talk, let’s get started examining the various ways of drawing a circle.
This method uses the border-radius property of CSS3, whose intended purpose is to round out the edges of a div or other element. The idea is to round out the edges to such an extent that the result looks something like a circle.
In order to get the shape to resemble a circle, this code required a tedious process of trial-and-error. To make it work, there were several CSS property values which had to be calculated and set.
/* css code */
border: solid 2px #000000;
A more legitimate method to draw a circle is to use the HTML5 Canvas element. The first thing to be noted about this HTML5 method is that it does not have a built-in scene graph, which means that the image is not saved as a set of objects (i.e., a red circle here, a blue square there), but rather as a matrix of pixels.
var c = document.getElementById("html_canvas_example");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF00FF";
ctx.strokeStyle = "#000000";
ctx.lineWidth = 2;
For a more comprehensive list of browsers that support the canvas tag, check out this Wikipedia article.
Unlike the other three approaches discussed here, this method can be implemented without the intervention of a scripting language and entirely within the HTML document.
SVG’s, or Scalable Vector Graphics, are written using XML tags. Unlike the Canvas tag, SVG elements are remembered in the Document Object Model (DOM), which means that we can draw a circle on the screen and then refer to it again later by name.
One cool thing about SVG is that free tools are available to edit them, such as svg-edit. Using this browser-based application, a person can create a complex shape and then copy-and-paste the code that will recreate it in HTML.
<!-- HTML CODE -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="40" cy="30" r="15" fill="#FF00FF"
stroke="#000000" stroke-width="2" />
Like the canvas tag and the CSS method discussed above, this approach is well-supported by all major browsers except for IE, which only began to support the most basics features of SVG in IE9. In addition, older versions of Android’s default browser do not natively support SVG, although there are translation libraries available.
If interested in learning more about SVG, refer to w3schools.com.
// create the canvas
var paper = Raphael("raphael_example");
// draw a circle at screen position (40,30) with radius 15
var circle = paper.circle(40,30,15);// adjust the circle's attributes
"fill" : "#FF00FF",
"stroke" : "#000000",
"stroke-width" : 2
Libraries like Raphael offer an elegant means of creating interactive graphics. However, they do so at a price. The source code which must be included weighs in at nearly 90 KB (minified). For users operating on older systems, the consequential loading time could be significant.
Because Raphael relies on SVG, it is bound to the limitations imposed by SVG—namely, a lack of all IE support except for IE9.
If you’re creating complex images which require pixel-level manipulations, HTML Canvas might be for you. If, however, you’re making something that requires a degree of interactivity with the user, you may be better off using SVG (or one of its associated libraries, like Raphael). But it is wise to remember IE’s lack of SVG support.