Tests comparing the custom software renderer against the native Canvas API using a higher-level, canvas-like interface for scene definition (e.g., `ctx.fillRect`, `ctx.strokeLine`). Focuses on verifying visual fidelity and correctness, particularly for crisp rendering scenarios.
Comprehensive tests for the low-level software renderer routines.
Tests low-level primitives like lines, rectangles, rounded rectangles, arcs and circles,
comparing them with the equivalent canvas rendering methods.
These tests only cover strokes/fills with transparency in absolute coordinates (i.e. no transformations), no
clipping.
A side-by-side comparison between CrispSwCanvas and standard HTML5 Canvas. CrispSwCanvas provides transformations, globalAlpha and clipping on top of the low-level renderer routines.
A minimal example of using CrispSwCanvas.
Just to check that the build library as all the code needed and only the code needed.
Measures and compares the rendering performance between Software Canvas and HTML5 Canvas. Shows how many shapes each implementation can render within a 16.7ms frame budget (60fps target), with visual results and comparative charts.
Legacy version of the performance comparison tests. Measures and compares the rendering performance between Software Canvas and HTML5 Canvas.
Detailed exploration of HTML5 Canvas rendering crispness, including pixel-perfect
drawing techniques, coordinate system explanations, and various examples
of strokes and fills.
This helps understanding how HTML5 Canvas drawing works in respect to the precise positioning of strokes and
fills, specifically for the cases useful for GUI drawing where one wants to draw axis-aligned fills and
strokes (thin or thick) crisply.
Demonstrates how transforms have complex effects on not only paths, but also on the exact shape of the
strokes related to those paths.
For example, in a stroke of a rectangle on which a "scale x" is applied, not only the rectangle is
stretched, but also the strokes, so the vertical strokes become thicker than the horizontal ones. This demo
helps visualize these subtle effects that must be considered when implementing a software renderer.
Demonstrates that the strokes of shapes in HTML5 Canvas are NOT part of the clipping areas for subsequent
drawings (only the fills are).
I.e. when using clip() on a path, Canvas only uses the mathematical path (with no thickness) as the clipping
region. The demo shows this behavior with lines and rectangles, confirming that even when a shape has a
thick stroke, the clipping region only follows the path outline without including the stroke area.