Search code examples
javascriptkineticjs

KineticJS strokeWidth of 1 causes a blurred, semi-opaque line instead of a sharp 1 pixel line

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);
});

Fig 1

Anyone got any ideas?

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).