SVG pixelate when using with canvas in full window height and width for all devices

I’m using Jspain library in this project. https://faisalsamroz.com/colorway15/

I drawed SVG image on canvas but it’s pixelating even it shows white dots when you fill up black color. Screenshot attached. Please help if someone else faced the same problem.

Answer

When an SVG is rendered to a bitmap – such as a canvas – antialiasing is used to make the edges of the shapes appear smoother.

If you then try to flood fill those bitmap shapes with a colour, those grey edge pixels are going to appear like white lines or spots around the edge of the fill.

There are a few things you can do. For example:

1. You can disable anti-aliasing in your SVG images. Use shape-rendering="crispEdges" as a property or CSS style. See: https://www.w3.org/TR/SVG11/single-page.html#painting-ShapeRenderingProperty, or

2. Render the SVG. Then run a threshhold or contrast filter over that image to remove the grey pixels.