Automattic / Automattic/node-canvas

SVG Path - elliptical arc not drawn correctly

Open
#1,377 4 comments 0 reactions 0 assignees View on GitHub
Bug Help wanted
Dominant language
JavaScript
Stars
10.7k
Forks
1.2k
Avg merge
4d 8h
Merged PRs (30d)
1

Description

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.
![Imgur](https://i.imgur.com/Slw4Wvf.png)

###### node-canvas 2.1.0
The png image that is created **does not look correct.**
![Imgur](https://i.imgur.com/vH4nOcm.png)

###### SVG data
Here is an [online SVG rendering](https://codepen.io/KFoxder/pen/bZEJmW) 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

```

###### Why is it breaking? Great question!

I am not 100% sure. But we spent some time looking into by comparing all the [commits](https://github.com/Automattic/node-canvas/compare/586b395afb4a7...a5921f6#diff-d52111b9458a13e196dab8299f822c29R2509) 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`](https://github.com/Automattic/node-canvas/pull/1288)) is the offending change. More specifically I believe it is [these lines in CanvasRenderingContext2d.cc](https://github.com/Automattic/node-canvas/blob/master/src/CanvasRenderingContext2d.cc#L2813-L2826) that caused the breaking of the arc path.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.