fknop / wasm-flood-fill

Implementation of a flood-fill canvas algorithm in Rust for WebAssembly

wasm-flood-fill

Implementation of a flood fill algorithm in Rust for WebAssembly.

This is an experimentation with WebAssembly to speed-up CPU intensive operations (flood-fill on large canvas).

Usage

import * as wasm from 'wasm-flood-fill'

const startX: number;
const startY: number;
const color: {r, g, b}: {r: number, g: number, b: number};
const context: CanvasRenderingContext2D;
const {width, height} = context.canvas;
const imageData = context.getImageData(0, 0, width, height);

const data = wasm.flood_fill(
  context, 
  imageData.data, 
  Math.round(startX), Math.round(startY), // Important that it is rounded before passing it to wasm
  r, g, b,  
  200, // color tolerance
  100  // Tolerance to keep filling (<= tolerance)
);

context.putImageData(new ImageData(data, width, height), 0, 0);

Benchmarks between an equivalent function implemented in JavaScript shows an improvement in speed of 3 to 5 times for the wasm version. One flood fill takes ~50-60ms in wasm and ~230ms in JS for a 800x660 canvas.