TeeTeeHaa/index.html

## index.html
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!-- note: without doctype internet explorer 9 uses quirks mode which does not know what canvas is -->
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>EaselJS Size Test</title>
    <script type="text/javascript" src="easel.js"></script>
    <script>

      function init()
      {
        var myCanvas = document.getElementById('mycanvas');

        var myStage = new Stage(myCanvas);
        myStage.snapToPixelEnabled = true;

        var myContainer = new Container;
        myContainer.x = myCanvas.width / 2;
        myContainer.y = myCanvas.height / 2;
        myContainer.snapToPixelEnabled = true;
        myStage.addChild(myContainer);

        var myGraphics = new Graphics;
        myGraphics.beginFill(Graphics.getRGB(196, 196, 196, 1.0));
        myGraphics.rect(0, 0, 100, 100);
        var myShape = new Shape(myGraphics);
        myShape.snapToPixel = true;
        myContainer.addChild(myShape);

        var myText = new Text('why is this rectangle 99 x 100 pixel?', '14px Verdana', Graphics.getRGB(0, 0, 0, 1.0));
        myText.snapToPixelEnabled = true;
        myContainer.addChild(myText);

        myStage.update();
      }

    </script>
  </head>
  <body onload="init();">
    <!-- width and height must be attributes of canvas not attributes within style, otherwise canvas looks streched -->
    <canvas id="mycanvas" width="800" height="600" style="background-color: #EEEEEE;">
    </canvas>
  </body>
</html>
	<?xml version="1.0" encoding="ISO-8859-1" ?>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
	<!-- note: without doctype internet explorer 9 uses quirks mode which does not know what canvas is -->
	<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<title>EaselJS Size Test</title>
	<script type="text/javascript" src="easel.js"></script>
	<script>

	function init()
	{
	var myCanvas = document.getElementById('mycanvas');

	var myStage = new Stage(myCanvas);
	myStage.snapToPixelEnabled = true;

	var myContainer = new Container;
	myContainer.x = myCanvas.width / 2;
	myContainer.y = myCanvas.height / 2;
	myContainer.snapToPixelEnabled = true;
	myStage.addChild(myContainer);

	var myGraphics = new Graphics;
	myGraphics.beginFill(Graphics.getRGB(196, 196, 196, 1.0));
	myGraphics.rect(0, 0, 100, 100);
	var myShape = new Shape(myGraphics);
	myShape.snapToPixel = true;
	myContainer.addChild(myShape);

	var myText = new Text('why is this rectangle 99 x 100 pixel?', '14px Verdana', Graphics.getRGB(0, 0, 0, 1.0));
	myText.snapToPixelEnabled = true;
	myContainer.addChild(myText);

	myStage.update();
	}

	</script>
	</head>
	<body onload="init();">
	<!-- width and height must be attributes of canvas not attributes within style, otherwise canvas looks streched -->
	<canvas id="mycanvas" width="800" height="600" style="background-color: #EEEEEE;">
	</canvas>
	</body>
	</html>