ralphsaunders/index.html

## index.html
<!doctype html>
<html>
 <head>
   <title>Canvas Stuff</title>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
   <script type="text/javascript" src="./scripts.js"></script>
 </head>
<body id="index">
  <canvas id="canvas" width="900" height="900">
    <!-- Fallback men, fallback! -->
  </canvas>
</body>
</html>

## scripts.js
$( document ).ready( function() {
  var canvas = document.getElementById( 'canvas' ); // Need to use getElementById, annoyingly
  var space = canvas.getContext( '2d' );

  /**
   * Clear
   *
   * Clears whole canvas from origin 0, 0 (x, y)
   */
  function clear() {
    space.clearRect( 0, 0, canvas.width, canvas.height );
  }

  /**
   * Draw Rectangle
   *
   * Draws rectangle on canvas when given coordinates.
   *
   * @param x int
   * @param y int
   */
  function drawTang( x, y ) {
    space.fillStyle = "blue"; // Will take pretty much all colour codes
    space.fillRect( x, y, 100, 100 );
  }

  /**
   * Generate Coordinates
   *
   * Generates x and y coordinates between 0 and 100
   *
   * @return array[ x, y ];
   */
  function genCoords() {
    var x = Math.floor( Math.random() * 11 * 10 );
    var y = Math.floor( Math.random() * 11 * 10 );

    return [ x, y ];
  }

  /**
   * Initiate
   *
   * Clears canvas;
   * Grabs random coords;
   * Draws rectangle
   */
  function init() {
    clear();
    var coords = genCoords();
    drawTang( coords[0], coords[1] );
  }

  // Every 100 miliseconds run init();
  var interval = window.setInterval( init, 100 );


});
	<!doctype html>
	<html>
	<head>
	<title>Canvas Stuff</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script type="text/javascript" src="./scripts.js"></script>
	</head>
	<body id="index">
	<canvas id="canvas" width="900" height="900">
	<!-- Fallback men, fallback! -->
	</canvas>
	</body>
	</html>
	$( document ).ready( function() {
	var canvas = document.getElementById( 'canvas' ); // Need to use getElementById, annoyingly
	var space = canvas.getContext( '2d' );

	/**
	* Clear
	*
	* Clears whole canvas from origin 0, 0 (x, y)
	*/
	function clear() {
	space.clearRect( 0, 0, canvas.width, canvas.height );
	}

	/**
	* Draw Rectangle
	*
	* Draws rectangle on canvas when given coordinates.
	*
	* @param x int
	* @param y int
	*/
	function drawTang( x, y ) {
	space.fillStyle = "blue"; // Will take pretty much all colour codes
	space.fillRect( x, y, 100, 100 );
	}

	/**
	* Generate Coordinates
	*
	* Generates x and y coordinates between 0 and 100
	*
	* @return array[ x, y ];
	*/
	function genCoords() {
	var x = Math.floor( Math.random() * 11 * 10 );
	var y = Math.floor( Math.random() * 11 * 10 );

	return [ x, y ];
	}

	/**
	* Initiate
	*
	* Clears canvas;
	* Grabs random coords;
	* Draws rectangle
	*/
	function init() {
	clear();
	var coords = genCoords();
	drawTang( coords[0], coords[1] );
	}

	// Every 100 miliseconds run init();
	var interval = window.setInterval( init, 100 );


	});