KineticJS strokeWidth of 1 causes a blurred, semi-opaque line instead of a sharp 1 pixel line
javascript, kineticjs
Solution
when you draw a line from (x,y1) to (x,y2) (say; the same is true for horizontal lines) you need to worry about whether x is "in the middle of a pixel". if the line is "between pixels" then it will be half in one and half in another. the result will look blurred (it's basically anti-aliasing).
graphics systems vary on whether coordinates are for corners or centres, but you can fix the issue by experimenting a little - you just need to add half a pixel width to the coord and try again.
in the case of an html5 canvas (0,0) is the top left corner, so if you have no transform i guess the top left pixel centre is at (0.5, 0.5).
Problem
I've looked around the internet and found nothing, I've looked on other KineticJS examples that use a strokeWidth of 1 on their rectangles and they all appear to have a semi-opaque 2 pixel line rather than a nice sharp 1px opaque black line. Now, I am guessing that as Google has nothing that the solution is either really simple or impossible, but.. do you know how I can get a one px border using KineticJS? ``` $(window).load(function(){ var stage = new Kinetic.Stage({container: "kineticdiv", width: 700, height: 400}); var layer = new Kinetic.Layer(); var rect = new Kinetic.Rect({ x: stage.attrs.width/2, y: stage.attrs.height/2, width: 100, height: 100, fill: "#eee", stroke: "black", strokeWidth: 1 }); layer.add(rect); stage.add(layer); }); ``` Anyone got any ideas?