Kinetic js canvas lines and shapes blurred at centre, but gets crisp when nearing the edges

Question

Here is the plunkr

http://plnkr.co/edit/05OtTgW78wibGz57Lrao

When the viewport width variable is set to 1366. In the plunkr when u move the cursor near the centre u will see the lines are almost gray and is blurred. But when moved near the edges it is crisp and black.

But in the same case when the viewport width is set to 1000 currently it is commented in plunkr. The lines are crisp at all the places, edges , centre.

This scenario applies to all drawing and not only the lines any thing i draw in the centre is bit dull while on the edges it is sharp at certain width of the stage.

Another issue here is eventhough i have specified the vertical lines as dashed it comes as as continuous lines, again this also depends on the viewport height mentioned.

Anyone has any insights on this???

Answer 1

Its just because I used the floating point coordinate in stage width...

Got the answer from the kinetic js community.. thanks

Answer 2

To your second question...

Here's how to get your missing vertical dashed line:

• Eliminate viewLinesVert entirely.
• Eliminate context.closePath()

And your vertical line will become dashed.

BTW, Firefox doesn't yet support context.setLineDash, so your app fails in FF.

To your first question...

Your lines will become a bit clearer if you use context.lineWidth=1.0.

Yes, I did notice your vertical line becomes slightly blurred at certain positions.

• In IE, the blur happens as the vertical line approaches the far right side.
• In Chrome, the blur happens more towards the middle and occurs for a much larger area.

Quite frankly, I don't know why, but it's probably due to anti-aliasing of the dashes.

Yes, I did notice your horizontal line is [Ok | Blurred | OK | Blurred] as it moves.

That is definitely due to anti-aliasing of the horizontal line.

I also tried your code in the latest KineticJS version 4.7.2 and the blurs are still present.

However...

When I recreate your code in native canvas (not KineticJS), the blurring does not occur in either the vertical or horizontal line--except when the lines are moving (this is unrelated motion blur).

So.....

Detail your problem and submit a bug report:

https://github.com/ericdrowell/KineticJS/issues?direction=desc&sort=created&state=open