Solving Sharpness issues when pencil is rendered.

[Lewis Boyles-White]

Hello guys, 

I am trying to work on solving the "jagged" lined which seem to render if you reverse a line path - doesn't seem to be an issue on naturally curved lines. 

See this demo here (drawing a "h" tends to replicate this issue occasionally. 

https://www.loom.com/share/e62989b44a664e1483601c7c90512227

Could anyone point me to the direction of the code that deals with the calculation of this path or a general walkthrough of why this may be an issue and I will do my best to investigate further and resolve?

Really liking the Core API functionality and want to create it with onboard recording so keen to resolve.  

Cheers, 

Lewis

[Steve Landey]

This is the part of the code that deals with pen drawing: https://github.com/literallycanvas/literallycanvas-core/blob/master/src/canvasRenderer.js#L209

I’m not sure what the specific problem is, here are two ideas:

- The pencil tool (https://github.com/literallycanvas/literallycanvas-core/blob/master/src/tools/Pencil.js) is generating points too close together

- The line smoothing algorithm has a bug (good luck there…)

Pen drawing is surprisingly tricky to get right.

--
You received this message because you are subscribed to the Google Groups "Literally Canvas" group.
To unsubscribe from this group and stop receiving emails from it, send an email to literallycanv...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/literallycanvas/b72b1642-634f-4d47-9c8e-b419d79eb3f0o%40googlegroups.com.

[Saumil Shah]

Folks I believe I have fixed this problem.

Refer: https://github.com/literallycanvas/literallycanvas-core/blob/master/src/canvasRenderer.js#L220

There are two properties that we must keep in mind when drawing paths on HTML5 Canvas:

LineCap - defaults to "butt". Other options are "round" and "square"

LineJoin - defaults to "miter". Other options are "round" and "bevel"

As a crude hack, I forced all LineCap's and LineJoin's to "round".

Line 220:

//ctx.lineCap = lineCap;

ctx.lineCap = "round";  // yes this hack is ugly

ctx.lineJoin = "round"; // but it works.

ctx.strokeStyle = points[0].color;
ctx.lineWidth = points[0].size;

Hope this helps!

[Saumil Shah]

I forgot to add the explanation of what goes on behind the scenes of LiterallyCanvas. This is stuff from what I could gather by reading the code. Steve, correct me if I am wrong (I believe you are the most informed person so far!)

When you draw a shape, the drawing happens in the canvas' context (ctx). There is also a buffer context (bufferCtx). I inspected the context properties of both canvas and buffer, and I found that the LineCap and LineJoin properties differ between the two. The miter LineJoin is causing all the jaggedness, and there is no place in the code that makes the bufferCtx properties follow the ctx properties. That is why I placed the hack (described in my prior message) to force the LineCap and LineJoin to "round" - across all contexts.

Now I'm no Coffee script developer, but I would be glad to merge my code with the main repository, or have any volunteer maintainer merge it - basically just those two lines above.

-- Saumil