lamberta/01-hello-shapes.html

## 01-hello-shapes.html
<html>
  <head>
    <script type="text/javascript">
      function draw () {
          var canvas = document.getElementById("my_canvas");
          var ctx = canvas.getContext("2d");

          rect(ctx);
          triangle(ctx);    //on square
          circle(ctx);      //on tri
      }
      function rect (ctx) {
          ctx.fillStyle = "rgb(255, 0, 0)";
          //from top left
          ctx.fillRect(20, 20, 50, 50);
      }
      function triangle (ctx) {
          //supports transparency
          ctx.fillStyle = "rgba(0, 0, 255, 0.5)";
          ctx.beginPath();
          ctx.moveTo(45,45);
          ctx.lineTo(105,45);
          ctx.lineTo(45,105);
          ctx.fill();
      }
      function circle (ctx) {
          ctx.fillStyle = '#00ff00'; //hex
          ctx.beginPath();
          //from center
          ctx.arc(100, 45, 25, 0, Math.PI*2, true);
          ctx.closePath();
          ctx.fill();
      }
    </script>
  </head>

  <!--bgcolor has no effect-->
  <body bgcolor="#ffffff" onload="draw()">
    <canvas id="my_canvas" width="300" height="300">
      <p>Sorry, canvas is not supported.</p><!--fallback-->
    </canvas>
  </body>
</html>

## 02-fill-noise.html
<html>
  <head>
    <script type="text/javascript">
      function draw () {
          var canvas = document.getElementById("my_canvas"),
              ctx = canvas.getContext("2d"),
              w = canvas.width,
              h = canvas.height;

          var x, y,
              r, g, b, rgb_color;

          for(x = 0; x < w; x++) {      //rows
              for(y = 0; y < h; y++) {  //columns
                  //get random volor
                  r = parseInt( Math.random() * 255 );
                  g = parseInt( Math.random() * 255 );
                  b = parseInt( Math.random() * 255 );
                  //concat string to proper form
                  rgb_color = 'rgb('+r+','+g+','+b+')';
                  //draw pixel - 1x1 rect
                  ctx.fillStyle = rgb_color;
                  ctx.fillRect(x, y, 1, 1);
              }
          }
      }
    </script>
  </head>

  <body bgcolor="#ffffff" onload="draw()">
    <canvas id="my_canvas" width="300" height="300">
      <p>Sorry, canvas is not supported.</p>
    </canvas>
  </body>
</html>

## 03-animate-1.html
<html>
  <head>
    <script type="text/javascript">
      //declare as globals for demo purpose
      var canvas, ctx,
          x = 0, y = 0;

      function init () {
          canvas = document.getElementById("my_canvas");
          ctx = canvas.getContext("2d");
          //call every 0.25 sec or 4 fps
          setInterval(draw, 250);
      }

      function draw () {
          x += 5; //increment position every call
          y += 5;
          ctx.fillStyle = "rgb(255,0,0)";
          ctx.fillRect(x, y, 20, 20);
      }

    </script>
  </head>

  <body onload="init()">
    <canvas id="my_canvas" width="300" height="300">
      <p>Sorry, canvas is not supported.</p>
    </canvas>
  </body>
</html>

## 04-animate-2.html
<html>
  <head>
    <script type="text/javascript">
      //declare as globals for demo purpose
      var canvas, ctx,
          x = 0, y = 0;

      function init () {
          canvas = document.getElementById("my_canvas");
          ctx = canvas.getContext("2d");
          //call every 0.25 sec or 4 fps
          setInterval(draw, 250);
      }

      function draw () {
          //clear canvas first, then increment
          ctx.clearRect(0, 0, canvas.width, canvas.height);
          ctx.fillStyle = "rgb(255,0,0)";
          ctx.fillRect(x += 5, y += 5, 20, 20);
      }

    </script>
  </head>

  <body onload="init()">
    <canvas id="my_canvas" width="300" height="300">
      <p>Sorry, canvas is not supported.</p>
    </canvas>
  </body>
</html>

## README
Canvas Presentation to BuffaloLab
10.16.2009

View the slides online...
https://docs.google.com/present/edit?id=0Ae37b8-0wbR7ZGNiODZ0aF8xOGRwcnN2cGR4&hl=en


Links shown tonite...

WHATWG Spec
http://www.whatwg.org/specs/web-apps/2007-10-26/multipage/section-the-canvas.html

Mozilla Canvas Tutorial and Examples
https://developer.mozilla.org/en/Canvas_tutorial

Processing.js
http://processingjs.org/

Doodle.js
http://www.lamberta.org/blog/doodle/


Demos...
http://www.chromeexperiments.com/
http://www.openstreetmap.org/
https://bespin.mozilla.com/
http://sarien.net/
http://29a.ch/jswars/
	<html>
	<head>
	<script type="text/javascript">
	function draw () {
	var canvas = document.getElementById("my_canvas");
	var ctx = canvas.getContext("2d");

	rect(ctx);
	triangle(ctx); //on square
	circle(ctx); //on tri
	}
	function rect (ctx) {
	ctx.fillStyle = "rgb(255, 0, 0)";
	//from top left
	ctx.fillRect(20, 20, 50, 50);
	}
	function triangle (ctx) {
	//supports transparency
	ctx.fillStyle = "rgba(0, 0, 255, 0.5)";
	ctx.beginPath();
	ctx.moveTo(45,45);
	ctx.lineTo(105,45);
	ctx.lineTo(45,105);
	ctx.fill();
	}
	function circle (ctx) {
	ctx.fillStyle = '#00ff00'; //hex
	ctx.beginPath();
	//from center
	ctx.arc(100, 45, 25, 0, Math.PI*2, true);
	ctx.closePath();
	ctx.fill();
	}
	</script>
	</head>

	<!--bgcolor has no effect-->
	<body bgcolor="#ffffff" onload="draw()">
	<canvas id="my_canvas" width="300" height="300">
	<p>Sorry, canvas is not supported.</p><!--fallback-->
	</canvas>
	</body>
	</html>
	Canvas Presentation to BuffaloLab
	10.16.2009

	View the slides online...
	https://docs.google.com/present/edit?id=0Ae37b8-0wbR7ZGNiODZ0aF8xOGRwcnN2cGR4&hl=en


	Links shown tonite...

	WHATWG Spec
	http://www.whatwg.org/specs/web-apps/2007-10-26/multipage/section-the-canvas.html

	Mozilla Canvas Tutorial and Examples
	https://developer.mozilla.org/en/Canvas_tutorial

	Processing.js
	http://processingjs.org/

	Doodle.js
	http://www.lamberta.org/blog/doodle/


	Demos...
	http://www.chromeexperiments.com/
	http://www.openstreetmap.org/
	https://bespin.mozilla.com/
	http://sarien.net/
	http://29a.ch/jswars/