Disable floating points

[dwelle]

There's a recent regression in Skia (Chromium 94.x+) in how it renders stuff when the SVG uses floating points and linecap is set to round, resulting in really annoying bugs https://github.com/excalidraw/excalidraw/issues/4046.

Reported to crbug https://bugs.chromium.org/p/chromium/issues/detail?id=1266390, but the fix may take a while.

Can rough support rounding floating point numbers to get around this in the meantime?

[pshihn]

@dwelle Does this bug affect only SVG?

[dwelle]

It actually affects only drawing onto Canvas. But I understand you're first generating SVG shapes before drawing them onto canvas? (I haven't checked).

Be it as it may, if I generate to SVG & then manually draw that SVG onto canvas, it's affected too. You can check here: https://codesandbox.io/s/sweet-mcnulty-w7zbs?file=/src/index.js

One fix (for our use case) is to either disable CanvasRenderingContext2D.lineCap = "round" (which we don't want to do), or rounding all the numbers in Drawable.sets[].ops[].data.

[dwelle]

I noticed there's opts.fixedDecimalPlaceDigits for SVGs — can we expose that for canvas-SVG rendering as well? It can be accomplished in userland, but would be faster & simpler if it's supported natively.

The only problem is 1) accuracy and 2) effectiveness. From testing around (1), we need to retain as least 2 decimal places otherwise the output is changed noticeably. But 2 decimal places doesn't solve the issue completely (2) — from testing it still happens in around 1/500 cases.

[pshihn]

But I understand you're first generating SVG shapes before drawing them onto canvas?

No roughjs does not do that. It draws directly to canvas using Canvas api. Unless you give svg to Rough to draw.

You can definitely do fixedDecimalPlaceDigits for canvas as well. Let me double check if it works as intended

[pshihn]

@dwelle I've published support for fixedDecimalPlaceDigits in canvas as well in v4.4.4. (https://github.com/rough-stuff/rough/pull/192) So you can set this property to 0 when drawing any shape. The shape gets generated with floating points. But when roughjs draws the shape, it rounds the value before drawing.

rc.rectangle(10, 10, 80, 80, {
  fixedDecimalPlaceDigits: 0
}); 

Keep in mind this may not solve all your problems though. Internally it's bound to use floating points when you zoom or when using screens with higher resolution. Also I think excalidraw also does canvas copy where it sores a shape in another canvas and then copies from that canvas. Doing that when zoomed in, you may get floating point issues.

Hope this fix helps though

[dwelle]

Thanks! https://github.com/excalidraw/excalidraw/pull/4200

Strange thing is today I'm seeing minimal difference between full decimal and 0 decimal render outputs. Whereas yesterday the difference between 2 decimals and 1 decimal renders were striking. Also 2 decimals were enough to fix the render issues, whereas today I need to strip all the decimals. Can't repro anymore — unclear what I was doing differently (I've lost the diff).