0
159
ViewsSVG 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.
1 answers
Answer question0
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:
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, orRender the SVG. Then run a threshhold or contrast filter over that image to remove the grey pixels.