$(document).ready(function() {
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');

 var w = canvas.width; 
  // The hue spectrum used by HSV color picker charts.
  var color, hue = [
    [255,   0,   0 ], // 0, Red,       0°
    [255, 255,   0 ], // 1, Yellow,   60°
    [  0, 255,   0 ], // 2, Green,   120°
    [  0, 255, 255 ], // 3, Cyan,    180°
    [  0,   0, 255 ], // 4, Blue,    240°
    [255,   0, 255 ], // 5, Magenta, 300°
    [255,   0,   0]], // 6, Red,     360°
 
    // Create the linear gradient: sx, sy, dx, dy.
    // That's the start (x,y) coordinates, followed by the destination (x,y).
    gradient = ctx.createLinearGradient(0, 0, w, 0);
 
  // Add the color stops.
  for (var i = 0; i <= 6; i++) {
    color = 'rgb(' + hue[i][0] + ', ' + hue[i][1] + ', ' + hue[i][2] + ')';
    gradient.addColorStop(i * 1/6, color);
  }
 
  // Use the gradient for the fillStyle.
  ctx.fillStyle = gradient;

var margin = 10;
var fe = w-margin; // far edge
var ne = margin * 2; // near edge
var ife = w-ne; 

        ctx.beginPath();
        ctx.moveTo(ne, margin);
        ctx.lineTo(ife, margin);
        ctx.quadraticCurveTo(fe, margin, fe, ne);
        ctx.lineTo(fe, ife);
        ctx.quadraticCurveTo(fe, fe, ife, fe);
        ctx.lineTo(ne, fe);
        ctx.quadraticCurveTo(margin, fe, margin, ife);
        ctx.lineTo(margin, ne);
        ctx.quadraticCurveTo(margin, margin, ne, margin);
        ctx.fill();

// grab the data
        var base64 = canvas.toDataURL("image/png");

var size = ".size { width:120px; height:120px; margin: 10px; text-align:center;line-height:80px;font-weight:bold;color:white;font-size:14pt;float:left; } "; 
var newClass = ".newClass{  background:url("+base64+");} ";

        $("<style type='text/css'>"+size + newClass +"</style>").appendTo("head");

	$('#box div').addClass("size");
	$('#box div').addClass("newClass");




    });