Automattic / Automattic/node-canvas

Does this package support to change "fill-rule=evenodd" to "fill-rule=nonzero" with a SVG?

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

Description

Hi Guys,
Wonderful package.
Does this package support to change "fill-rule=evenodd" to "fill-rule=nonzero" with a SVG?
I'm using SVGs to make font and want to remove attribute "fill-rule=evenodd" from SVGs.

I use 'canvas' to draw shapes with "fill('evenodd')" and expect 'canvas' changes fill-rule but it doesn't.
If I draw another shape with "fill('nonzero ')" then it doesn't merge them together and just output the path with "fill-rule:nonzero".
How can I change "fill-evenodd" to "fill-rule:nonzero"?
Thanks very much.

My test code:
const Canvas = require('canvas')
var canvas = Canvas.createCanvas(100, 100, 'svg')
var ctx = canvas.getContext('2d')

ctx.fillStyle = '#f00'
ctx.rect(0, 0, 100, 50)
ctx.arc(50, 50, 50, 0, 2 * Math.PI)
ctx.fill('evenodd')

ctx.rect(0, 0, 30, 40)
ctx.fill('nonzero')
const buf = canvas.toBuffer()
console.log(buf.toString());

The output:

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with the supplied JavaScript reproduction using createCanvas(..., 'svg') and inspect the SVG produced by toBuffer(). Compare the output from the two fill() calls and determine whether the requested fill-rule conversion and path-merging behavior are specified. Done means the supported behavior is documented or the request is narrowed to an actionable change.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, node.js
Domain
computer-graphics
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.