Text - Rendering differences when text justified with strikethrough

[inssein]

I am just rigorously testing my application for differences between client and server side rendering, and I came across one right now.

When rendered in the browser, it looks correct:

The same, when rendered in node-canvas:

I will be debugging this later on, but if anyone has any ideas on what it could be, any help would be appreciated.

[asturur]

Did you debug the cause?
This looks a justifed text, where we do not use spaces, rather we just advance the next word of the space needed to fill the row.
Then text decoration is just a fillRect.

So i'm amazed nodecanvas has problem with it.
Do you have some suggestion?

[inssein]

sorry @asturur haven't had a chance to work on this at all. Still one of the things I need to look into.

[asturur]

I'm not good with nodejs + fabric yet.
If you could share some code snippet to speed me up, i would be more than happy to start bugfixing.

I need a simple js file that contains:
requires, canvas setup, todataurl in png in same folder.
and that i can run with a simple "node file.js"

In the middle i will add the code i need to debug.

Or something that will start simple webserver that outputs the png in my broeser instead of putting in the folder.

If i have a tool like this i can start. I have so many issues to take care of that i always postpone node.

[inssein]

@asturur I have a simple web debugger, but it is unfortunately strongly tied to our application (we store information about shapes very differently for legacy reasons, etc).

Unfortunately its my last week at this job, and I too (like kagnax) am starting a new job elsewhere.

All that said, I will try to setup a small application for you based on JSON export that can re-create this experiment.

[inssein]

Hey @asturur, I cannot seem to replicate this in the Kitchensink (http://fabricjs.com/kitchensink). Text that has strike-through and is justified does not render the same in the kitchensink as it does in my application.

I have setup a small debug renderer you can use, the gist is available here:
https://gist.github.com/inssein/b95b1506f089301bcdf9f207dc05e2a6

It basically allows you to pass in JSON, and renders it. It needs some work (dynamic sizing, etc) but should be a good start. I use something similar for our internal application.

[inssein]

@asturur I am not sure if the Kitchensink version changed, but today the results are different.

Try the following JSON:

{"objects":[{"type":"textbox","originX":"left","originY":"top","left":112,"top":156,"width":427,"height":52.43,"fill":"#333","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"text":"Hello World","fontSize":40,"fontWeight":"normal","fontFamily":"Helvetica","fontStyle":"","lineHeight":1.16,"textDecoration":" line-through","textAlign":"justify","textBackgroundColor":"","styles":{"0":{"1":{},"2":{},"3":{},"4":{},"5":{},"6":{},"7":{},"8":{},"9":{},"10":{},"11":{}}},"minWidth":20}],"background":""}

[asturur]

nodecanvas2 seems to solve this
close with 09811bd