Canvas Cache

An image cache for canvas and key-value store for ImageData objects. Useful for fast draws in browser games with the putImageData() method.

Install

npm install --save canvas-cache

Use

import canvasCache from 'canvas-cache';
 
// create cache instance
const cache = canvasCache();
 
/*
  your game draw method
*/

Methods

has()

cache.has({ key, width, height })

Returns boolean if image with matching key, width, and height exists.

get()

cache.get({ key, width, height })

Returns matching ImageData object or undefined.

set()

cache.set({ image, key, width, height })

Sets new image and returns a new ImageData object.

delete()

cache.delete({ key, width, height })

Deletes matching image and returns boolean.

clear()

cache.clear()

Clear cache of all images.

Example

import canvasCache from 'canvas-cache';
 
// create cache instance
const cache = canvasCache();
 
// add image
cache.set({
    image: img,
    key: 'playerImage',
    width: 200,
    height: 200
});
 
// get image data
let imageData = cache.get({
    key: 'playerImage',
    width: 200,
    height: 200
});
 
// draw image data
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
 
ctx.putImageData(imageData, 0, 0);