rendering bug when I add fancy graphics about hyperbolic-canvas HOT 33 CLOSED

When it spins, you mean?

from hyperbolic-canvas.

yeah that tick thing. really annoying

from hyperbolic-canvas.

It could be something to do with line 175 of Canvas.js. I have no idea why, but I had to do this.ctx.lineto(x, y) where x and y are already the position of the pen. Without that line, some polygons are filled wrong.

from hyperbolic-canvas.

That is, an arc has been drawn from point A to point B, and before another arc can be drawn from point B to point C, a line must be drawn from point B to point B.

from hyperbolic-canvas.

No, I removed that line and it doesn't fix this problem.

from hyperbolic-canvas.

It doesn't seem to be related to the styling, either. I removed all but the c.ctx.strokeStyle = color, and can still see it.

from hyperbolic-canvas.

I think it's something to do with the c.ctx.lineWidth = 2;

from hyperbolic-canvas.

I thought so, too, but I removed it, and it still had the problem.

from hyperbolic-canvas.

I changed it to 1 and that solved it but I wanted 2px

from hyperbolic-canvas.

width 1:

from hyperbolic-canvas.

What browser are you using, by the way?

from hyperbolic-canvas.

chrome. you?

from hyperbolic-canvas.

try removing the shadowBlur

from hyperbolic-canvas.

Firefox. Could explain why width of 1 works for you.

from hyperbolic-canvas.

what maybe it's not. I did see some flickering. I couldn't find a frame where a tick came up

from hyperbolic-canvas.

I remove all but the color, and it still happens.

from hyperbolic-canvas.

maybe it's the floating point

from hyperbolic-canvas.

that possible? i dunno

from hyperbolic-canvas.

I don't think so. It only happens with stroke. Fill seems to work fine.

from hyperbolic-canvas.

I suppose that doesn't prove that it's not a floating point error.

from hyperbolic-canvas.

maybe it's a bug that nobody fixed for 10 years in some low level libarary

from hyperbolic-canvas.

what os are you using? I'm thinking it's a bug in linux somewhere

from hyperbolic-canvas.

Ubuntu.

from hyperbolic-canvas.

It gets a bit more clear with a wider stroke. See that gap?

from hyperbolic-canvas.

I tried it on windows. still happends

from hyperbolic-canvas.

when this is fixed I want an option to turn it on and off.
https://gist.github.com/x13machine/a8af1b73ec3eec927f1d

from hyperbolic-canvas.

Ha, we'll see.

from hyperbolic-canvas.

A separate issue occurs for certain canvas size:

from hyperbolic-canvas.

This function seems to do it less:

function drawPolygon(c,p){
    var vertices = p.vertices;
    var n = vertices.length;
    var start = c.at(vertices[0])
    for (var i = 0; i < n; i++) {
        c.ctx.beginPath();
        c.drawPath(Line.givenTwoPoints(vertices[i], vertices[(i + 1) % n]));
        c.ctx.stroke();
        c.ctx.closePath();
    }
    return true;
}

from hyperbolic-canvas.

I'm think that the other rendering problems are do to algorithm problems.

from hyperbolic-canvas.

I tested this with your awesome.html file, and the problem seems to occur just as frequently. It also now has the problem that I mentioned in my previous comment on the 18th of June. Since the lines are no longer a part of the same path, the polygon can't be filled.

from hyperbolic-canvas.

only the player does it

from hyperbolic-canvas.

This can be fixed by setting the lineJoin property on the canvas context to "round".

canvas.setContextProperties({ lineJoin: 'round' });

Unfortunately, this fix precludes the possibility of sharp corners. I was able to reduce the effect of the bug, but not remove it entirely, instead modifying the miterLimit property.

from hyperbolic-canvas.