Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

canvas-webworker

Package Overview
Dependencies
Maintainers
1
Versions
3
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

canvas-webworker

Pure JavaScript Canvas implimentation that can be used in WebWorkers

  • 0.0.3
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
0
decreased by-100%
Maintainers
1
Weekly downloads
 
Created
Source

Canvas WebWorker

Pure JavaScript Canvas implimentation that can be used in WebWorkers

WebWorkers are great when long scripts has to be excuted 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 accecssed in the WebWorker this is fairly difficult. Using this pure JavaScript a Canvas polyfill can be used. Drawing is not hardware accerated so it will be slower compaired to a regular canvas but the programm 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

FAQs

Package last updated on 24 Mar 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc