Canvas WebWorker

Pure JavaScript Canvas implementation that can be used in WebWorkers

WebWorkers are great when long scripts have to be executed while the main program has to keep running (cannot be blocked). When a complex image has to be generated, for instance a large texture for a game, the generation can be blocking for the game. A solution would be to generate the texture in a WebWorker. Due to the fact that the HTMLCanvasElement cannot be accessed in the WebWorker this is fairly difficult. Using this pure JavaScript a Canvas polyfill can be used. Drawing is not hardware accelerated so it will be slower compared to a regular canvas but the program will remain non-blocking.

Instalation

Install the library

Using JSPM (ECMAScript / ES6 Module)

jspm install github:casperlamboo/canvas-webworker

Using NPM (CommonJS module)

npm install canvas-webworker --save

Usage

The library imatates the HTML5 Canvas API. To use the library, first include it in your project.

Using JSPM (ECMAScript / ES6 Module)

import { Canvas, Image, transfer } from 'casperlamboo/canvas-webworker';

Using NPM (CommonJS module)

const { Canvas, Image, transfer } = require('canvas-webworker');

When the library is included Canvas can be used.

const canvas = new Canvas(720, 480);
const context = canvas.getContext('2d');

To transfer Image, ImageData or Canvas entities the transfer function can be used.

// main.js

const worker = new Worker('worker.js');

const { data, buffer } = transfer.encode(myImage);

worker.postMessage(data, [buffer]);

// worker.js

self.addEventListener('message', ({ data }) => {
  const myImage = transfer.decode(data);
});

Progress

The library isn't finished yet. This is my progress so far. I'm planning to add unit tests aswell.

DONE

• CanvasImageSource
  • getContext
• Image
  • src
  • onload
• CanvasRenderingContext2D
  • globalAlpha
  • drawImage
  • createPattern
  • lineCap
  • lineWidth
  • lineJoin
  • miterLimit
  • beginPath
  • closePath
  • moveTo
  • lineTo
  • rect
  • fill
  • stroke
  • rotate
  • scale
  • translate
  • transform
  • createImageData
  • getImageData
  • putImageData
  • save
  • restore
  • canvas
  • fillStyle
    • pattern
    • color
  • strokeStyle
    • pattern
    • color
  • globalCompositeOperation
    • source-over
    • source-in
    • source-out
    • source-atop
    • destination-over
    • destination-in
    • destination-out
    • destination-atop
    • lighter
    • copy
    • xor

TODO

• CanvasImageSource
  • toDataURL
  • toBlob
• CanvasRenderingContext2D
  • arc
  • arcTo
  • bezierCurveTo
  • quadaticCurveTo
  • fillText
  • strokeText
  • measureText
  • getLineDash
  • setLineDash
  • lineDashOffset
  • font
  • textAlign
  • textBaseline
  • direction
  • clip
  • strokeStyle
    • gradient
  • createLinearGradient
  • createRadialGradient
  • shadowBlur
  • shadowColor
  • shadowOffsetX
  • shadowOffsetY
  • setTransform
  • resetTransform
  • globalCompositeOperation
    • multiply
    • screen
    • overlay
    • darken
    • lighten
    • color-dodge
    • color-burn
    • hard-light
    • soft-light
    • difference
    • exclusion
    • hue
    • saturation
    • color
    • luminosity