Skip to content

Instantly share code, notes, and snippets.

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" "">
<!-- note: without doctype internet explorer 9 uses quirks mode which does not know what canvas is -->
<html xml:lang="en" xmlns="">
<title>EaselJS Size Test</title>
<script type="text/javascript" src="easel.js"></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;
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;
var myText = new Text('why is this rectangle 99 x 100 pixel?', '14px Verdana', Graphics.getRGB(0, 0, 0, 1.0));
myText.snapToPixelEnabled = true;
<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;">
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment