jkischkel/jsbin.itunib.html

## jsbin.itunib.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div class="page">
    <div class="container">
      <div class="content">
        <canvas>
      </div>
    </div>
  </div>
</body>
</html>

## jsbin.itunib.js
/**
 * Different things to draw on the canvas
 * Just add a method of your own and register it by pushing it
 * into the methods array. (see REGISTER HERE)
 *
 * Add helpers of your own if you think they might be useful for others.
 */
var canvas = document.querySelector('canvas'),
    methods = [];

function drawCanvas () {
  var context = canvas.getContext("2d"),
      size = 400,
      methodIndex = getRandom(0, methods.length - 1);

  canvas.width = canvas.height = size;

  // Every method is called with the canvas' context and it's size
  // For testing your method only use the right index or call it directly
  methods[methodIndex](context, size);
}

/**************************
 * CANVAS DRAWING METHODS *
 **************************/
function jk(context, size) {

  function drawSpiral(context, size) {
    var angleBase = 3 + (getRandom(1, 5) / 10),
        xOffset = getRandom(0, size),
        yOffset = getRandom(xOffset, xOffset + size / 10);

    for (i = 0; i < getRandom(5, 10) * 100; i++) {
      var angle = angleBase * i,
          x = (1 + angle) * Math.cos(angle) + xOffset,
          y = (1 + angle) * Math.sin(angle) + yOffset;

      context.lineTo(x, y);
    }

    context.strokeStyle = "white";
    context.stroke();
  }

  function drawGradient(context, size) {
    var gradient = context.createLinearGradient(0, 0, size, 0),
        col1 = getRandomRGBStyle(),
        col2 = getRandomRGBStyle();

    gradient.addColorStop(0, col1);
    gradient.addColorStop(0.5, col2);
    gradient.addColorStop(1, col1);

    context.fillStyle = gradient;
    context.fillRect(0, 0, size, size);
  }

  drawGradient(context, size);
  drawSpiral(context, size);
}

/*****************
 * REGISTER HERE *
 *****************/

methods.push(jk);

/***********
 * HELPERS *
 ***********/

function getRandom(from, to) {
  return Math.floor(Math.random()*(to - from + 1) + from);
}

function getRandomRGB () {
  return [
    Math.round(Math.random() * 255),
    Math.round(Math.random() * 255),
    Math.round(Math.random() * 255)
  ];
}

function getRandomRGBStyle() {
  return 'rgb(' + getRandomRGB().join() + ')';
}

function darkenRGB (rgbs, amount) {
  return [
    Math.max(0, rgbs[0] - amount),
    Math.max(0, rgbs[1] - amount),
    Math.max(0, rgbs[2] - amount)
  ];
}

drawCanvas();
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
	<meta charset=utf-8 />
	<title>JS Bin</title>
	</head>
	<body>
	<div class="page">
	<div class="container">
	<div class="content">
	<canvas>
	</div>
	</div>
	</div>
	</body>
	</html>
	/**
	* Different things to draw on the canvas
	* Just add a method of your own and register it by pushing it
	* into the methods array. (see REGISTER HERE)
	*
	* Add helpers of your own if you think they might be useful for others.
	*/
	var canvas = document.querySelector('canvas'),
	methods = [];

	function drawCanvas () {
	var context = canvas.getContext("2d"),
	size = 400,
	methodIndex = getRandom(0, methods.length - 1);

	canvas.width = canvas.height = size;

	// Every method is called with the canvas' context and it's size
	// For testing your method only use the right index or call it directly
	methods[methodIndex](context, size);
	}

	/**************************
	* CANVAS DRAWING METHODS *
	**************************/
	function jk(context, size) {

	function drawSpiral(context, size) {
	var angleBase = 3 + (getRandom(1, 5) / 10),
	xOffset = getRandom(0, size),
	yOffset = getRandom(xOffset, xOffset + size / 10);

	for (i = 0; i < getRandom(5, 10) * 100; i++) {
	var angle = angleBase * i,
	x = (1 + angle) * Math.cos(angle) + xOffset,
	y = (1 + angle) * Math.sin(angle) + yOffset;

	context.lineTo(x, y);
	}

	context.strokeStyle = "white";
	context.stroke();
	}

	function drawGradient(context, size) {
	var gradient = context.createLinearGradient(0, 0, size, 0),
	col1 = getRandomRGBStyle(),
	col2 = getRandomRGBStyle();

	gradient.addColorStop(0, col1);
	gradient.addColorStop(0.5, col2);
	gradient.addColorStop(1, col1);

	context.fillStyle = gradient;
	context.fillRect(0, 0, size, size);
	}

	drawGradient(context, size);
	drawSpiral(context, size);
	}

	/*****************
	* REGISTER HERE *
	*****************/

	methods.push(jk);

	/***********
	* HELPERS *
	***********/

	function getRandom(from, to) {
	return Math.floor(Math.random()*(to - from + 1) + from);
	}

	function getRandomRGB () {
	return [
	Math.round(Math.random() * 255),
	Math.round(Math.random() * 255),
	Math.round(Math.random() * 255)
	];
	}

	function getRandomRGBStyle() {
	return 'rgb(' + getRandomRGB().join() + ')';
	}

	function darkenRGB (rgbs, amount) {
	return [
	Math.max(0, rgbs[0] - amount),
	Math.max(0, rgbs[1] - amount),
	Math.max(0, rgbs[2] - amount)
	];
	}

	drawCanvas();