<canvas id="cancirles" width="400", height="150">Canvas Circles</canvas>

<script type="text/javascript">
    element = document.getElementById("cancirles");
    c = element.getContext("2d");

    // read the width and height of the canvas
    width = parseInt(element.getAttribute("width"));
    height = parseInt(element.getAttribute("height"));

    // create new image pixel data
    imageData = c.createImageData(width, height);

    pos = 0; // index position into imagedata array

    xoff = width / 3; // offsets to "center"
    yoff = height / 3;

    // walk left-to-right, top-to-bottom; it's the
    // same as the ordering in the imagedata array:

    for (y = 0; y < height; y++) {
        for (x = 0; x < width; x++) {
            // calculate sine based on distance
            x2 = x - xoff;
            y2 = y - yoff;
            d = Math.sqrt(x2*x2 + y2*y2);
            b = Math.sin(d/6.0);

            // calculate RGB values based on sine
            r = b * 200;
            g = 125 + b * 80;
            b = 235 + b * 20;

            // set red, green, blue, and alpha:
            imageData.data[pos++] = Math.max(0,Math.min(255, r));
            imageData.data[pos++] = Math.max(0,Math.min(255, g));
            imageData.data[pos++] = Math.max(0,Math.min(255, b));
            imageData.data[pos++] = 0xff; // alpha
        }
    }

    // put pixel data on image
    c.putImageData(imageData, 0, 0);

</script>