Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
another minimalistic test case for rect of EaselJS not being pixel precise
<?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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment