Skip to main content
React ThorVG Fiber provides two canvas components for rendering vector graphics: SwCanvas for CPU-based software rendering and GlCanvas for GPU-accelerated WebGL rendering.

​
SwCanvas (Software Rendering)

SwCanvas uses CPU-based rendering, providing maximum compatibility across platforms and browsers. 
import { SwCanvas, Shape, Rect } from '@thorvg/react-fiber';

function App() {
  return (
    <SwCanvas width={800} height={600}>
      <Shape fill={[255, 0, 0, 255]}>
        <Rect x={100} y={100} width={200} height={150} />
      </Shape>
    </SwCanvas>
  );
}

​
SwCanvas Props

​
width
number
required
Width of the canvas in CSS pixels.
​
height
number
required
Height of the canvas in CSS pixels.
​
devicePixelRatio
number
default:"window.devicePixelRatio"
Device pixel ratio for high-DPI displays. Automatically defaults to the window’s pixel ratio.
​
locateFile
(path: string, prefix: string) => string
Optional function to customize WebAssembly file paths. Useful for CDN configurations.

​
When to Use SwCanvas

Maximum Compatibility

Works on all browsers and devices without WebGL support requirements.

Simple Graphics

Best for basic vector graphics with moderate complexity.

Static Content

Ideal for graphics that don’t require frequent updates.

Predictable Performance

CPU-based rendering provides consistent, predictable performance.

​
GlCanvas (WebGL Rendering)

GlCanvas uses GPU-accelerated WebGL rendering for better performance with complex scenes. 
import { GlCanvas, Shape, Circle } from '@thorvg/react-fiber';

function App() {
  return (
    <GlCanvas id="my-canvas" width={800} height={600}>
      <Shape fill={[0, 128, 255, 255]}>
        <Circle x={400} y={300} radius={100} />
      </Shape>
    </GlCanvas>
  );
}

​
GlCanvas Props

​
id
string
required
Required unique identifier for the canvas element. Used by WebGL context to bind to the canvas.
​
width
number
required
Width of the canvas in CSS pixels.
​
height
number
required
Height of the canvas in CSS pixels.
​
devicePixelRatio
number
default:"window.devicePixelRatio"
Device pixel ratio for high-DPI displays.
​
locateFile
(path: string, prefix: string) => string
Optional function to customize WebAssembly file paths.

​
When to Use GlCanvas

Complex Graphics

Better performance for scenes with many shapes and complex paths.

Animations

GPU acceleration provides smoother animations and frequent updates.

High Performance

Offloads rendering to GPU for faster processing.

Modern Browsers

Requires WebGL support (available in all modern browsers).

​
Key Differences

  • SwCanvas: CPU-based software rendering using Canvas 2D API
  • GlCanvas: GPU-accelerated rendering using WebGL
  • SwCanvas: Linear performance degradation with complexity. Best for simple to moderate graphics.
  • GlCanvas: Better performance with complex scenes due to GPU parallelization.
  • SwCanvas: Works on all browsers, including older ones without WebGL
  • GlCanvas: Requires WebGL support (available in all modern browsers since ~2015)
  • SwCanvas: Only requires width and height
  • GlCanvas: Requires width, height, and a unique id
  • SwCanvas: Uses ABGR8888 (premultiplied alpha)
  • GlCanvas: Uses ABGR8888S (straight alpha)

​
Choosing the Right Canvas

1

Assess Your Requirements

Consider the complexity of your graphics, target browsers, and performance needs.
2

Start with SwCanvas

For most use cases, SwCanvas provides excellent compatibility and sufficient performance.
3

Upgrade to GlCanvas if Needed

If you experience performance issues with complex scenes or animations, switch to GlCanvas.
Both canvas types share the same API for child components (Shape, Scene, Rect, Circle, Path), making it easy to switch between them.

​
Example: Responsive Canvas

import { useState, useEffect } from 'react';
import { SwCanvas, Shape, Rect } from '@thorvg/react-fiber';

function ResponsiveCanvas() {
  const [size, setSize] = useState({ width: 800, height: 600 });

  useEffect(() => {
    const handleResize = () => {
      setSize({
        width: window.innerWidth,
        height: window.innerHeight
      });
    };

    window.addEventListener('resize', handleResize);
    handleResize();

    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return (
    <SwCanvas width={size.width} height={size.height}>
      <Shape fill={[100, 200, 255, 255]}>
        <Rect 
          x={size.width / 2 - 100} 
          y={size.height / 2 - 100} 
          width={200} 
          height={200} 
        />
      </Shape>
    </SwCanvas>
  );
}
Changing the width or height props will reinitialize the canvas. For frequent resizing, consider using CSS transforms or fixed internal dimensions with viewport-relative positioning.

Build docs developers (and LLMs) love

Get started for freeTalk to us