Have ideas to improve npm?Join in the discussion! »

    canvimation

    0.1.0 • Public • Published

    A simple library to make interactive animation on html5 canvas element

    Usage

    import Canvimation from "canvimation";
    
    const canvas = document.createElement("canvas");
    canvas.width = "100%";
    canvas.height = "100%";
    document.body.appendChild(canvas);
    
    const animationScene = {
      tick: () => {},
      render: (virtualContext) => {},
    };
    
    new Canvimation({
      canvas,
      virtualCanvas: document.createElement("canvas"), // optional, created atomatically by default
      animationScene,
      tickTime: 20, // optional, 20 is default value
      canvasContextType: "2d", // optional, "2d" is default value
    });

    AnimationScene

    AnimationScene param is an object (it may be class instance), with two attributes tick and render, where:

    • tick is a function that is called on each tick. No params
    • render is a function which be called when needed to render. Accept only one param: virtualContext

    VirtualCanvas and VirtualContext

    • virtualCanvas is a hidden element, which used to optimize the rendering process. Typically, render goes step by step, drawing primitive figures one by one. When there is a lot of primitives to draw, the user may see some blinking. To solve that problem it is possible to render the whole frame on a hidden (virtual) canvas first, and then copy it on a real (visible) one. Canvimation does this step. So all you need is to render everything at virtual canvas context, that passed to render function
    • virtualContext is virtualCanvas context of contextType that passed in contextType option ("2d" by default)

    Install

    npm i canvimation

    DownloadsWeekly Downloads

    0

    Version

    0.1.0

    License

    MIT

    Unpacked Size

    20.8 kB

    Total Files

    14

    Last publish

    Collaborators

    • avatar