Java Script Code for a Random Circle Generator
By Stephen Bucaro
Have you seen some Web content that uses a group of several different size
and color circles as a decoration? Something like that might also be used
as a logo. In this article I'll show you how to use a bit of Java Script
code to draw a group of random size and color circles.
This code will work only in Web browsers that support the html canvas
element. Only newer browsers such as Firefox 3.6 or Internet Explorer 8
support the canvas element. If you're not already using one of these or
an even newer version, you'll need to upgrade before you can do this example.
The canvas element creates a bitmap drawing surface on which you can use
Java Script to draw lines, curves, shapes and other graphics. Because this is
DHTML (Dynamic Hypertext Markup Language), you can draw graphics on the fly.
If you want to follow along with this example, type the code into Notepad
and execute it in your browser. In Windows Start menu, click All programs
and open the Accessories folder and double-click on the Notepad
application. Type, or copy and paste the example code into a Notepad text file.
Save the file with a name with the file extension .htm. Then double-click
on the file name to open your Web browser and execute the code.
The html code for the canvas element is shown below. This creates a 300
pixel by 300 pixel drawing surface on your webpage.
<canvas id="area" width="300" height="300"></canvas>
Shown below is a snippet of Java Script code to begin explaining how to
draw on the canvas.
var myCanvas = document.getElementById("area");
if(undefined == myCanvas.getContext)
alert("No canvas support");
var ctx = myCanvas.getContext("2d");
// drawing code here
The first line of code creates a reference to the canvas element named
myCanvas. Since only newer browsers support the canvas element, the
next lines of code perform a check to see if the user's browser supports the
canvas element. If myCanvas contains undefined then the user's browser
does not support the canvas element. Here I create a message box that
displays the message "No canvas support". In an actual application you
might want to do something more creative, like write code to display an image.
If the user's browser does support the canvas element, the code creates a
context for use with the canvas. A context can be thought of as a little
drawing kit containing a default pen, paint brush and container of default
colored paint. Before you draw on the canvas you need to replace these default
items with those of your choice.
First, lets draw a border around the canvas. For that we replace the default
pen with a black pen that draws a line 1 pixel wide.
ctx.strokeStyle = "#000000";
ctx.lineWidth = 1;
Actually, the default pen was probably already black and 1 pixel wide, but
it's always good programming practice to always define the drawing devices
you are going to use before using them, even if you know what they are.
Shown below is the actual code to perform the drawing.
First we call the graphic context's beginPath method, then we move
the pen to the upper left corner of the canvas. Then we define a line to the
upper right corner of the canvas; to the lower right corner; to the lower left
corner. Then we call the graphic context's stroke