How To Draw A Circle In Javascript

At first glance, learning to plan a circle in a browser is a job that to many would seem senseless. But believe information technology or not, creating a circle in a browser is a job that offers a lot of value to web designers of all skill levels.

Why take the time to render a circle with code, when nosotros could only employ an paradigm editing plan like Photoshop to create the circle?

By rendering the circumvolve in-browser, as opposed to embedding an paradigm or coding it in wink, we ensure that information technology will exist attainable from all devices (including Apple tree's) and that there will be no loss in quality if the circle increases in size. Much similar 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'due south get started examining the various ways of drawing a circle.

CSS

This method uses the border-radius holding of CSS3, whose intended purpose is to round out the edges of a div or other chemical element. The idea is to round out the edges to such an extent that the result looks something similar a circumvolve.

In order to get the shape to resemble a circle, this lawmaking required a tiresome process of trial-and-error. To make information technology work, there were several CSS property values which had to exist calculated and set.

/* css lawmaking */ div#css_example { -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; edge: solid 2px #000000; background-colour: #FF00FF; width: 28px; elevation: 28px; margin-left: 25px; margin-top: 15px; }

Although some of these CSS properties could potentially be adjusted by the intervention of Javascript, the border-radius CSS property does not appear to have been intended for the purpose of cartoon shapes. Complicating things further is IE'south lack of support for the border-radius CSS property for all releases until IE9. For these reasons, this method should only be regarded as a novelty or hack.

HTML5 Sail

A more legitimate method to draw a circle is to use the HTML5 Sheet element. The first thing to be noted about this HTML5 method is that information technology 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 bluish foursquare there), but rather every bit a matrix of pixels.

In other words, if we were to draw a circle on one side of the screen and then move information technology to the other side, we cannot simply movement the existing circle because the computer has no memory of the circle; there is merely the retentiveness of thebitmap that results from telling the calculator to draw a circle. In this manner, the method is comparable to cartoon with MS Paint, except we're using Javascript to depict things instead of the cursor.

/* javascript code */ var c = document.getElementById("html_canvas_example"); var ctx = c.getContext("2d"); ctx.fillStyle = "#FF00FF"; ctx.strokeStyle = "#000000"; ctx.lineWidth = two; ctx.beginPath(); ctx.arc(40,thirty,15,0,Math.PI*2,true); ctx.closePath(); ctx.make full(); ctx.stroke();

For a more than comprehensive list of browsers that support the canvas tag, check out this Wikipedia commodity.

SVG

Unlike the other three approaches discussed here, this method can be implemented without the intervention of a scripting language and entirely inside the HTML document.

SVG's, or Scalable Vector Graphics, are written using XML tags. Unlike the Canvass tag, SVG elements are remembered in the Document Object Model (DOM), which means that we tin can draw a circumvolve on the screen and then refer to information technology again later by name.

I cool affair near SVG is that gratuitous tools are available to edit them, such as svg-edit. Using this browser-based application, a person can create a circuitous shape and so copy-and-paste the lawmaking that volition recreate it in HTML.

 <svg xmlns="http://www.w3.org/2000/svg" version="ane.ane"> <circle cx="40" cy="30" r="xv" fill up="#FF00FF" stroke="#000000" stroke-width="2" /> </svg>

Like the canvass tag and the CSS method discussed higher up, this approach is well-supported past all major browsers except for IE, which merely began to back up the most nuts 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 nigh SVG, refer to w3schools.com.

Javascript libraries

The Raphael Javascript Library has rapidly become 1 of our favorite tools for making online apps. There are many libraries like this one whose purpose is to improve the ease of creating graphics. This ane does the job by interfacing with a combination of SVG and VM (Vector Markup). In this manner, Raphael could be considered an extension of SVG.

/* javascript lawmaking */ // create the sheet var paper = Raphael("raphael_example"); // describe a circle at screen position (forty,30) with radius 15 var circle = paper.circumvolve(40,30,fifteen);// adjust the circle'southward attributes circumvolve.attr({ "fill" : "#FF00FF", "stroke" : "#000000", "stroke-width" : 2 });

Libraries like Raphael offering an elegant means of creating interactive graphics. However, they do so at a price. The source code which must be included weighs in at about 90 KB (minified). For users operating on older systems, the consequential loading fourth dimension could be meaning.

Because Raphael relies on SVG, it is leap to the limitations imposed by SVG—namely, a lack of all IE support except for IE9.

The Take-Away

If you're creating circuitous images which crave pixel-level manipulations, HTML Sail might be for y'all. If, nonetheless, y'all're making something that requires a degree of interactivity with the user, y'all may be better off using SVG (or one of its associated libraries, like Raphael). Merely information technology is wise to remember IE's lack of SVG support.