Seams between fills in canvas renderer #26
Labels
A-rendering
Area: Rendering & Graphics
A-web
Area: Web & Extensions
canvas
Issues relating to the CanvasRenderingContext2D renderer
P-low
Priority: Low
Due to the method of anti-aliasing in most SVG renderers, shared edges will appear to have seams in the canvas render backend. "Conflation artifacts" are the technical term for these.
Example (Ruffle canvas backend on top, Flash on bottom):
(Also see #24)
The standard advice to avoid this is to overlap the paths, e.g. an outline fill should appear on top of the fill underneath it. But Flash almost always generates non-overlapping paths to avoid overdraw.
I'm not sure there is an easy fix for this beyond disabling AA completely with SVG properties like
shape-rendering: crispEdges
. But I think this will be kind of moot, as WebGL rendering (via tessellation and/or Pathfinder) will be the long-term goal over canvas.The text was updated successfully, but these errors were encountered: