A deterministic 2D Javascript raster engine with Canvas-like API, cross-browser and Node.js compatible.
Comprehensive demonstration of swcanvas.js capabilities on a single 800x600 canvas. Features interactive redraw button, animation demo, PNG download functionality, and real-time performance metrics. Demonstrates basic shapes, gradients, patterns, transformations, clipping, stroke styles, line dashing, alpha blending, complex paths, and sub-pixel rendering.
A minimal example showing basic swcanvas.js usage - creates a red square in the center of a canvas using the HTML5-compatible API. Perfect starting point for understanding swcanvas.js integration.
Main browser test interface with side-by-side HTML5 Canvas vs swcanvas.js comparisons. Automatically runs 36 core functionality tests and 140 visual rendering tests on page load. Includes interactive visual comparison tools and PNG/BMP download functionality.
Tests for the direct rendering path - 79 individual parametrized test cases comparing swcanvas.js direct rendering against native HTML5 Canvas. Verifies optimized code paths for basic shapes including circles, lines, rectangles, and rounded rectangles.
Comparative benchmarking between swcanvas.js direct rendering and native HTML5 Canvas. Uses ramp-up methodology measuring maximum shapes per frame within a 16.7ms budget (60fps target). Shows visual results and comparative charts for various shape types.
Interactive step-by-step debugger for XOR composite operations. Click through each rendering step to watch for differences between HTML5 Canvas and swcanvas.js panels. Includes detailed pixel analysis and navigation controls for thorough investigation.
Side-by-side comparison of HTML5 Canvas vs swcanvas.js clearRect behavior. Validates that clearRect properly clears pixels to transparent while preserving surrounding content. Includes pixel-level analysis output.
Step-by-step analysis of HTML5 Canvas XOR composite operation behavior. Shows progression from white background through shape additions with XOR blending, with pixel analysis at each step.
Main project documentation with features overview, quick start guide, API documentation (both HTML5-compatible and Core APIs), usage examples for Node.js and browser, and build/test instructions.
Detailed architecture documentation covering design patterns, component organization, the dual API architecture, and OO principles used throughout the codebase.
Documentation for the direct rendering system including RectOps, CircleOps, LineOps, ArcOps, and RoundedRectOps classes. Covers optimized rendering paths and implementation details.