Created this test app to demonstrate the issue: https://github.com/matthewbillienyc/node-canvas-svg-test/

Node Canvas SVG to PNG issue

So this repo is to show how between node-canvas versions 2.0.0-alpha.181 and 2.1.0 a bug with rendering SVG arcs was introduced.

Environment Info

Ubuntu 18.04
Nodejs 6.11.0

node-canvas 2.0.0-alpha.18

The png image that is created looks correct.

node-canvas 2.1.0

The png image that is created does not look correct.

SVG data

Here is an online SVG rendering of the SVG data below. The offending data is this: A 10 10 0 1 1 16.499995000000418 10.49000000166666. Specifically it looks like the 10.49000000166666 in the arc path is what causes it to break.

    <svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style="font-family:RobotoCondensed;font-size:12px;" xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400">
        <g class="translate" transform="translate(200,200)">
            <path fill="#6833c9" class="flag" d="M 16.5 10.5 A 10 10 0 1 1 16.499995000000418 10.49000000166666 Z M 6.5 20.5 L 6.5 29.531480378285778" stroke="#6833c9" stroke-width="1"></path>
        </g>
    </svg>

Why is it breaking? Great question!

I am not 100% sure. But we spent some time looking into by comparing all the commits between 2.0.0-alpha.18 and 2.1.0. You will see that it looks like this Pull Request (1288: Adapt to V8 7.0) is the offending change. More specifically I believe it is these lines in CanvasRenderingContext2d.cc that caused the breaking of the arc path.