Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About BTH User Agreement Privacy Site Map Contact News Feeds

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");
}
else
{
  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.

ctx.beginPath();
ctx.moveTo(0,0);

ctx.lineTo(300,0);
ctx.lineTo(300,300);
ctx.lineTo(0,300);
ctx.lineTo(0,0);

ctx.stroke();

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