desandro/basic-canvas.html

## basic-canvas.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>basic canvas</title>

  <style media="screen">
    body {
      font-family: 'Helvetica Neue', Arial, sans-serif;
    }

    canvas {
      border: 1px solid #CCC;
    }
  </style>

  <script>
    function init() {
      var canvas = document.getElementsByTagName('canvas')[0];
      if (canvas.getContext) {
        var
          ctx = canvas.getContext("2d"),
          w = canvas.width,             // canvas width
          h = canvas.height            // canvas height
        ;
        // begin canvas code

        ctx.fillStyle = "rgb(200,0,0)";
        ctx.fillRect (10, 10, 50, 50);

        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        ctx.beginPath();
          ctx.arc (70, 70, 40, 0, Math.PI*2, true);
          ctx.fill();
        ctx.closePath();
      }

    }
    window.addEventListener('load', init, false);
  </script>

</head>
<body>

  <h1>basic canvas</h1>

  <canvas width="150" height="150"></canvas>

</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>basic canvas</title>

	<style media="screen">
	body {
	font-family: 'Helvetica Neue', Arial, sans-serif;
	}

	canvas {
	border: 1px solid #CCC;
	}
	</style>

	<script>
	function init() {
	var canvas = document.getElementsByTagName('canvas')[0];
	if (canvas.getContext) {
	var
	ctx = canvas.getContext("2d"),
	w = canvas.width, // canvas width
	h = canvas.height // canvas height
	;
	// begin canvas code

	ctx.fillStyle = "rgb(200,0,0)";
	ctx.fillRect (10, 10, 50, 50);

	ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
	ctx.beginPath();
	ctx.arc (70, 70, 40, 0, Math.PI*2, true);
	ctx.fill();
	ctx.closePath();
	}

	}
	window.addEventListener('load', init, false);
	</script>

	</head>
	<body>

	<h1>basic canvas</h1>

	<canvas width="150" height="150"></canvas>

	</body>
	</html>