ralphtheninja/gist:2624835

## gistfile1.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>
    Panda Catch
  </title>
   <style>
  canvas {
    border:1px solid silver;
    width:150px;
  }
   </style>
</head>
  <body>
    <canvas id="character" width=200 height=300></canvas>
    <script type="text/javascript">
    var canvas = document.getElementById('character');
    var context = canvas.getContext('2d');

    function panda(x,y,scale) {
      this.x = x || 0;
      this.y = y || 0;
      this.scale = 1.0;
      this.zi = '的';
      this.pinyin = 'de';
      this.draw = function() {
        drawPanda(this);
      };
    }

    function drawPanda(panda){

        // VVVVVVVVVVVV
      // Panda's Body
      // vvvvvvvvvvvv

      drawEllipse(100,175,200,200);
      drawEllipse(100,175,180,180, 'white')
      context.fillStyle = 'black';
      context.font = "95pt kai";
      context.fillText(panda.zi, 37, 225);

        // VVVVVVVVVVVVVVVVVVVVV
      // Panda's Feet And Arms
      // vvvvvvvvvvvvvvvvvvvvv

      // The feet need to be behind the body. This could have been accomplished by
      // drawing the feet first; but since this work flow started with the body
      // the feet need to be placed behind so we need to inform our 'context' of
      // compositing: https://developer.mozilla.org/en/Canvas_tutorial/Compositing

      context.globalCompositeOperation = 'destination-over';
      drawEllipse(65, 275, 75, 40, 'black');
      drawEllipse(130, 275, 75, 40, 'black');
      drawEllipse(30, 125, 75, 40, 'black');
      drawEllipse(170, 125, 75, 40, 'black');

      // VVVV
      // Face
      // vvvv

      context.globalCompositeOperation = 'source-over';
      drawEllipse(100,65,190,115);
      drawEllipse(100,65,170,95, 'white');

      context.globalCompositeOperation = 'destination-over';
      drawEllipse(60, 20, 75, 40);
      drawEllipse(140, 20, 75, 40);

      context.globalCompositeOperation = 'source-over';
      drawEllipse(70, 55, 70, 40);
      drawEllipse(130, 55, 70, 40);
      drawEllipse(80, 60, 15, 10, 'white');
      drawEllipse(120, 60, 15, 10, 'white');
      drawEllipse(100, 80, 15, 10);
      drawEllipse(100, 100, 45, 10);

      console.log('info: drew - ' +  panda.zi + ' /'+panda.pinyin+'/');
      // info: drawing -  的 /de/
    };

    function drawEllipse(centerX, centerY, width, height, color) {
      context.fillStyle = color || 'black';
      context.beginPath();
      context.moveTo(centerX, centerY - height/2); // A1
      context.bezierCurveTo(
      centerX + width/2, centerY - height/2, // C1
      centerX + width/2, centerY + height/2, // C2
      centerX, centerY + height/2); // A2
      context.bezierCurveTo(
      centerX - width/2, centerY + height/2, // C3
      centerX - width/2, centerY - height/2, // C4
      centerX, centerY - height/2); // A1
      context.fill();
      context.closePath();
    }

    function draw(){
      panda1 = new panda(50,50,1);
      panda1.draw();
      // draw body
    };


    draw();
  </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>
	Panda Catch
	</title>
	<style>
	canvas {
	border:1px solid silver;
	width:150px;
	}
	</style>
	</head>
	<body>
	<canvas id="character" width=200 height=300></canvas>
	<script type="text/javascript">
	var canvas = document.getElementById('character');
	var context = canvas.getContext('2d');

	function panda(x,y,scale) {
	this.x = x \|\| 0;
	this.y = y \|\| 0;
	this.scale = 1.0;
	this.zi = '的';
	this.pinyin = 'de';
	this.draw = function() {
	drawPanda(this);
	};
	}

	function drawPanda(panda){

	// VVVVVVVVVVVV
	// Panda's Body
	// vvvvvvvvvvvv

	drawEllipse(100,175,200,200);
	drawEllipse(100,175,180,180, 'white')
	context.fillStyle = 'black';
	context.font = "95pt kai";
	context.fillText(panda.zi, 37, 225);

	// VVVVVVVVVVVVVVVVVVVVV
	// Panda's Feet And Arms
	// vvvvvvvvvvvvvvvvvvvvv

	// The feet need to be behind the body. This could have been accomplished by
	// drawing the feet first; but since this work flow started with the body
	// the feet need to be placed behind so we need to inform our 'context' of
	// compositing: https://developer.mozilla.org/en/Canvas_tutorial/Compositing

	context.globalCompositeOperation = 'destination-over';
	drawEllipse(65, 275, 75, 40, 'black');
	drawEllipse(130, 275, 75, 40, 'black');
	drawEllipse(30, 125, 75, 40, 'black');
	drawEllipse(170, 125, 75, 40, 'black');

	// VVVV
	// Face
	// vvvv

	context.globalCompositeOperation = 'source-over';
	drawEllipse(100,65,190,115);
	drawEllipse(100,65,170,95, 'white');

	context.globalCompositeOperation = 'destination-over';
	drawEllipse(60, 20, 75, 40);
	drawEllipse(140, 20, 75, 40);

	context.globalCompositeOperation = 'source-over';
	drawEllipse(70, 55, 70, 40);
	drawEllipse(130, 55, 70, 40);
	drawEllipse(80, 60, 15, 10, 'white');
	drawEllipse(120, 60, 15, 10, 'white');
	drawEllipse(100, 80, 15, 10);
	drawEllipse(100, 100, 45, 10);

	console.log('info: drew - ' + panda.zi + ' /'+panda.pinyin+'/');
	// info: drawing - 的 /de/
	};

	function drawEllipse(centerX, centerY, width, height, color) {
	context.fillStyle = color \|\| 'black';
	context.beginPath();
	context.moveTo(centerX, centerY - height/2); // A1
	context.bezierCurveTo(
	centerX + width/2, centerY - height/2, // C1
	centerX + width/2, centerY + height/2, // C2
	centerX, centerY + height/2); // A2
	context.bezierCurveTo(
	centerX - width/2, centerY + height/2, // C3
	centerX - width/2, centerY - height/2, // C4
	centerX, centerY - height/2); // A1
	context.fill();
	context.closePath();
	}

	function draw(){
	panda1 = new panda(50,50,1);
	panda1.draw();
	// draw body
	};


	draw();
	</script>
	</body>
	</html>