🎨 SWCanvas Feature Showcase

Comprehensive demonstration of SWCanvas deterministic 2D rendering capabilities â€ĸ 📁 View on Github

About SWCanvas: A deterministic 2D Javascript raster engine with Canvas-like API, cross-browser and Node.js. This demo showcases the key features using the minified production build.

Note: SWCanvas focuses on graphics primitives - text rendering is not implemented.
Render Time: -ms

🔷 Basic Shapes

  • Filled rectangles with solid colors
  • Stroked rectangles with various line widths
  • Complex polygon paths
  • Curved paths with arcs and beziers

🌈 Gradients & Patterns

  • Linear gradients with multiple color stops
  • Radial gradients with inner/outer circles
  • Conic gradients with sweep angles
  • Repeating image patterns

🔄 Transformations

  • Translation (position offset)
  • Rotation around pivot points
  • Scaling (uniform and non-uniform)
  • Combined transformation matrices

✂ī¸ Clipping & Masking

  • Rectangular clip regions
  • Complex path-based clipping
  • Nested clipping with intersections
  • Save/restore clip stack management

🖊ī¸ Stroke Styles

  • Various line caps (butt, round, square)
  • Line joins (miter, round, bevel)
  • Dashed line patterns with offsets
  • Sub-pixel stroke rendering

🎭 Alpha Blending

  • Semi-transparent overlays
  • Global alpha compositing
  • Source-over blending mode
  • Premultiplied alpha handling

🌓 Shadow Effects

  • Configurable shadow color with transparency
  • Variable blur radius for soft shadows
  • X/Y offset controls for shadow positioning
  • Works with all drawing operations and paint sources

🔄 Composite Operations

  • Complete Porter-Duff compositing (10 operations)
  • Source/destination blending modes
  • XOR operations for "bite" effects
  • Canvas-wide and source-bounded operations

đŸŽ¯ Path Hit Testing

  • Geometric isPointInPath() with fill rules
  • Accurate isPointInStroke() detection
  • Works with complex paths and transforms
  • Support for external SWPath2D objects

đŸ–ŧī¸ Image Rendering

  • drawImage() with ImageLike objects
  • Scaling and source rectangle support
  • Works with transforms and alpha blending
  • RGB to RGBA auto-conversion

🎨 Advanced Shapes

  • ellipse() method with rotation support
  • arcTo() for rounded corner connections
  • Precise geometric calculations
  • HTML5 Canvas API compatibility

📊 ImageData API

  • getImageData() for pixel manipulation
  • createImageData() factory methods
  • putImageData() for direct pixel control
  • Cross-platform RGBA data access