Drawing a rectangle with 1px border - graphics.setStrokeStyle(1) doesn't work correctly

[Usual Suspects]

Hi guys,

I'm using the following code piece to draw a rectangle with exactly 1px black border. Unfortunately, the result has a border thicker than 1px and not completely black but dark gray.

var border = new createjs.Shape();
border.graphics.beginStroke("#000");
border.graphics.setStrokeStyle(1);
border.snapToPixel = true;
border.graphics.drawRect(0, 0, 450, 309);
border.x = stageWidth / 2 - 200;
border.y = stageHeight / 2 - 150;

Please see the jsFiddle example;

http://jsfiddle.net/Bpz88/16/

[Grant Skinner]

Canvas draws strokes "around" the pixel position you specify, so to get a nice crisp 1 px line you have to draw it on a half pixel position. A little confusing, but it's just the way Canvas works.

This will draw a crisp 1px black border:

var border = new createjs.Shape();
border.graphics.beginStroke("#000");
border.graphics.setStrokeStyle(1);
border.snapToPixel = true;
border.graphics.drawRect(0, 0, 450, 309);

border.x = stageWidth / 2 - 200 - 0.5;
border.y = stageHeight / 2 - 150 - 0.5;

[Usual Suspects]

Grant,

This was interesting to know. Thanks for sharing.