Skip to content

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

License

Notifications You must be signed in to change notification settings

fknop/wasm-flood-fill

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages