motion-canvas
motion-canvas copied to clipboard
Option to _disable_ Anti-Aliasing
Description
I like to make short "explainer gifs" when making a big write-up and have great interest in motion-canvas.
I come from utilizing Adobe After Effects to make gifs such as this:
The problem and biggest challenge I had with making these gifs though is that their file-size is very correlated by the characteristics of the motion and the amount of colors that are to be animated. One way that helps, in my experience, is to disable anti-aliasing to reduce the amount of colors in exchange for "quality". This also helps when exporting a gif with transparency and there is no support for partial-transparency. This might also aid in viewport performance.
Proposed solution An option to disable anti-aliasing for the viewport and for rendering to turn off Anti-Aliasing on shapes, lines, text, and images.
Additional context
For SVGs, I believe the shape-rendering option may be utilized which accomplishes what I am looking for:
Though, ideally this is a systematic option and not something that has to be configured per-shape.
For images, there is CanvasRenderingContext2D.imageSmoothingEnabled which would maintain aliasing on images.
There is also CanvasRenderingContext2D.textRendering
The feature, as displayed in After Effects
Images already have the smoothing
property which controls the value of CanvasRenderingContext2D.imageSmoothingEnabled.
I don't think there's a way to disable antialiasing for shapes, though. We don't use SVGs, we use the CanvasRenderingContext2D to do the drawing.