sequence-canvas

Frame-by-frame reproduction of images in HTML Canvas

https://jsfiddle.net/ehoop1337/ukg3L75y/

Installation

Package Manager

    npm install sequence-canvas

ES Module

    import SequenceCanvas from 'sequence-canvas';
    
    const canvas = new SequenceCanvas({
      // settings
    });

CommonJS

    const SequenceCanvas = require('sequence-canvas');
    
    const canvas = new SequenceCanvas({
      // settings
    });

Script

HTML

    <script src="sequence-canvas.js"></script>
    <script>
        const canvas = new SequenceCanvas({
            // settings
        });
    </script>

CDN

https://cdn.jsdelivr.net/gh/ehoop1337/sequence-canvas/lib/sequence-canvas.js

Example

const canvas = new SequenceCanvas({
  // required object
  canvas: {
    // required property
    element: document.querySelector('canvas'),
    width: innerWidth,
    height: innerHeight,
  },
  // required object
  images: {
    // required property
    paths: ['../img/01.webp', '../img/02.webp', '../img/03.webp'],
    options: {
      size: {
        width: 400,
        height: 400,
      },
      position: {
        x: innerWidth / 2 - 200,
        y: innerHeight / 2 - 200
      }
    }
  },
  init: true,
  direction: -1,
  loop: false,
  fps: 30,
  startIndex: 0,
  finishIndex: 2,
  currentIndex: 0,
  startImmediately: false,
  startAfterLoaded: true,
  logging: true,
  on: {
    init: function () {
      console.log('init');
    }
  }
});

canvas.on('stop', function() { console.log('stop')});

Settings

Required

Option	Type	Description
canvas	object	An object that has an element and images property.
canvas.element	HTMLCanvasElement	Need to pass HTMLCanvasElement.
images	object	An object that has the paths and options properties.
images.paths	string[]	An array of strings with paths to images.

Optional

Option	Type	Default	Description
canvas.width	number	canvas.element.width	Width of the canvas.
canvas.height	number	canvas.element.height	Height of the canvas
images.options	object		An object containing images settings.
images.options.position	object		It can be used without specifying the trim and size properties.
images.options.position.x	number		The X coordinate on the canvas where the image will be placed.
images.options.position.y	number		The Y coordinate on the canvas where the image will be placed.
images.options.trim	object		It cannot be used without specifying the position and size properties.
images.options.trim.x	number		The X coordinate of the starting point of the crop.
images.options.trim.y	number		The Y coordinate of the starting point of the crop.
images.options.trim.width	number		The width of the cropped image.
images.options.trim.height	number		The height of the cropped image.
images.options.size	object		It cannot be used without specifying the position property.
images.options.size.width	number		The applied width of the image (you can stretch or compress the image).
images.options.size.height	number		The applied height of the image (you can stretch or compress the image).
init	boolean	true	Initializes the library in full. Starts loading images and sets the canvas dimensions.
direction	number	1	Frame change direction. 1 is forward, -1 is back.
loop	boolean	true	Looping rendering.
fps	number	60	Number of frames per second. Range from 1 to 60.
startIndex	number	0	The lower border of the render.
finishIndex	number	images.length - 1	The upper border of the render.
currentIndex	number	0	Specifies which index in the image array is currently being rendered. During initialization, it will call the play method, not start if it differs from the startIndex property.
startImmediately	boolean	false	Start immediately after loading the first image.
startAfterLoaded	boolean	true	Starts rendering immediately after loading all images.
logging	boolean	false	Output to the console information about the rendering of a certain image.

Methods

Method	Description
start	Starts rendering from the image index specified in startIndex.
play	Plays rendering.
pause	Pauses rendering.
stop	Stops rendering and draws images with index startIndex.
on	Adds an event listener.
off	Removes an event listener.
setCurrentImage	Sets the value for the currentImage properties. Make sure that the value does not exceed the length of the array.
getCurrentImage	Gets the value of the currentImage property.
setSizesCanvas	Sets the dimensions for the canvas { width, height }.
getSizesCanvas	Gets canvas settings { width, height }.
setImageOptions	Sets new settings for images { position?: { x, y }, trim?: { x, y, width, height }, size?: { width, height } }.
getImageOptions	Gets image settings { position: { x, y }, trim: { x, y, width, height }, size: { width, height } }.
setFps	Sets the value for the fps properties. Range from 1 to 60.
getFps	Gets the value of the fps property.
setDirection	Sets the value for the directions properties. The value can be 1 or -1.
getDirection	Gets the value of the directions property.
setLoop	Sets the value for the loop properties, boolean value only.
getLoop	Gets the value of the directions property.
setStartIndex	Sets the value for the startIndex properties. Make sure that the value does not exceed the length of the array.
getStartIndex	Gets the value of the startIndex property.
setFinishIndex	Sets the value for the finishIndex properties. Make sure that the value does not exceed the length of the array.
getFinishIndex	Gets the value of the finishIndex property.
getLogging	Gets the value of the logging property.
enableLogging	Enable logging.
disableLogging	Disable logging.

Usage of methods

const canvas = new SequenceCanvas({
  // ...
})
//...
canvas.pause();

Events

Event	Description
init	Initialization.
load	Image loading has started.
loaded	Finished loading the image.
render	The picture is drawn on the canvas.
start	The start method is called, the rendering of images has started from the index specified in startIndex.
play	The play method is called, the rendering of images has started from the index specified in currentIndex.
pause	The pause method is called, rendering is on pause.
stop	The stop method is called, currentIndex borrows a value from startIndex.

Usage of events

const canvas = new SequenceCanvas({
  // ...
  on: {
    'init': function(event) {
      console.log('init', event);
    }
  }
});
// ...
function pauseHandler() {
  console.log('pause');
}
canvas.on('pause', pauseHandler);
canvas.off('pause', pauseHandler);

Authors

• @ehoop1337

License

MIT