Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Radio Button Canvas is an unusual (and totally useless) jQuery plugin that creates a matrix of radio buttons.
Fetching latest commit...
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Radio Buttons Canvas

Radio Button Canvas is an unusual (and totally useless) jQuery plugin that creates a matrix of radio buttons. A blank canvas looks like this:

All tightly packed together, you can think of the buttons as pixels which you can use to create simple animations, pictures, and even games. You can see a few examples on the demo page.

I'm working on a basic API which makes creating your own radio-button projects quite a bit easier. It's still pretty rough and minimally-featured. Any contributions would be great, so feel free to fork it and mess around.

Note: This plugin is still being actively developed. The API will almost certainly change rapidly and without notice. I wouldn't recommend using it for anything important – though I'm not even sure that's possible.

Getting started.

Obviously, you'll need to include the necessary scripts in your head element:

<script src="" type="text/javascript"></script>
<script src="jquery.radio_button_canvas.js" type="text/javascript" charset="utf-8"></script>

Next, you need initialize your radio button canvas. It's pretty simple. Call it like any other jQuery plugin, but be sure to store the returned value in a variable. We'll need it later.

var canvas = $('#canvas').radio_button_canvas();

You can also pass configuration options to specify the canvas width or height:

var canvas = $('#canvas').radio_button_canvas({
    width: 500,     // defaults to $(window).width(),
    height: 350     // defaults to $(window).height()

After creating the canvas you have a lot of flexibility to draw whatever you like. However, I've included a really basic API to help speed things along. For example, let's add a point to our canvas:

var canvas = $('#canvas').radio_button_canvas();    // call the plugin canvas
canvas.point(5,5);                                  // create a point

And then we have a point:

You can also draw lines:

canvas.line(2,2, 8,5);

Which produces:

Also, all methods return something sensible to allow chaining. Points, for example, return self allowing you to do things like:


All shapes, such as lines, return an object which contains the array of points that constitute the shape. Shapes come packed with a bunch of methods which allow you to manipulate the entire shape at once. For example, let's draw a line and slowly move it eastward across the canvas:

var line = canvas.line(2,2, 8,5);   // draw the line

setInterval(function() {            // move it east
}, 200);

There's the basic idea. Now let's look more closely at the API.


Create a point by specifying an x and y:

var point = canvas.point(5,5); // arguments => x, y

When initialized, a point comes checked by default. Here are some basic methods for checking and unchecking points:

point.check();          // returns self
point.uncheck();        // returns self
point.is_checked();     // returns boolean

It can sometimes be convenient to fetch a point's coordinates. You can do that using the coordinates function:

canvas.point(3,5).coordinates();      // returns [3,5]

You can also check if a point is equal to another point using the equals function:

var another_point = canvas.point(3,5);
canvas.point(3,5).equals(another_point);    // returns true

You can find other points relative to an existing point using the neighbor function:

// using ordinal coordinates
point.neighbor('north'); // always returns neighboring point

// using cartesian coordinates 
point.neighbor(0, -2);  // returns point two north
point.neighbor(1, 2);   // returns point two south and one east

Finally points have a move function. This takes the same arguments as the neighbor function:

point.move('north'); // moves the point up one

Under the hood, in fact, move uses neighbor to do the heavy lifting. Unlike neighbor, however, move unchecks the current point before moving to a new location.


Create a line by specifying the start and end point:

canvas.line(2,2, 8,5); // arguments => x1, y1, x2, y2

Lines, like most canned shape functions, return a shape object. This gives lines both a points and move function. Check out the shapes section below for more to see how you can use these functions on lines.

Do keep in mind, however, that the radio button canvas is, well, low resolution. This means that short lines with gentle slopes don't work so well. For example:

canvas.line(2,2, 8,3);

Creates a pretty pathetic line:


Create a rectangle by specifying the coordinates for the top left point and the bottom right point:

var rectangle = canvas.rectangle(2,2, 8,6); // arguments => tlX, tlY, brX, brY

Which creates:

Like lines, the rectangle function returns a shape object allowing you to call any methods generally available to shapes. For details, see the shapes section below.


The polygon function provides an easy way to create various such triangles, diamonds, and so on. Make a polygon by specifying the vertices as either arrays of coordinates or points:

var polygon = canvas.polygon(
  [2,4], [6,2], [8,6], point(6,8)

Which creates:

Like lines and rectangles, the polygon function returns a shape object giving you access to any shape functions. For details, see the shapes section below.


Shapes are the hardest working and most flexible objects on the canvas. You can create a shape simply by specifying the constituent points as arrays of coordinates:

var face = canvas.shape(
  [3,2], [4,3], [5,2], [2,4], [6,4], [3,5], [4,5], [5,5]

And you'll get:

But specifying every single coordinate can be a bit onerous. So you can also compose shapes form other shape objects – like lines, rectangle, or other shapes. For example, let's add a few more points to our face:

var happy_man = canvas.shape(
  face,                       // the shape we just created above
  canvas.point(3,6),          // notice you can pass point objects too
  [3,7], [4,6], [5,6], [5,7]  // and you can pass coordinates as before

And you get this exciting fellow:

Using the points property, you can easily get an array of all the points that constitute a shape:

happy_man.points; // returns a bunch of point objects

You can also call move on a shape which takes the same arguments as the point move function described above:

happy_man.move('north'); // moves one step north and returns self

And then things get totally awesome:

var party_time = function() {
  setTimeout(function() {
  }, 100);

setInterval(function() {
}, 300);

I'll still improving the API, adding new shapes, etc. If you need a more in depth explanation of the existing objects, check out the unit tests. They do a fairly good job specifying the code.

Things to do.

  • Shapes can currently have redundant points. That should not be allowed.

  • Add .fill() / .unfill(); methods to shapes class.

  • Finish demo page

  • Should lines and rectangles be able to accept points are arguments? Currently they can only accept x and y coordinates.

Something went wrong with that request. Please try again.