Infinity Canvas

Demo

Description

This component has as objective the practicality and economy of resources when we use the canvas of the html, being able to overcome the limitation of the drawing area through methods of scroll.

Features

• easy to use
• no external dependencies
• supports all major browsers and IE11+
• customizable and extendable

Install

npm install infinity-canvas

import ICanvas from 'infinity-canvas';

<script src="https://unpkg.com/infinity-canvas"></script>

Usage

First we must define a container for our component, with its respective size:

<div id="canvas_container" style="width: 100%; height: 800px;">

Then we take our container, and pass it to the component's constructor:

const container = document.getElementById('canvas_container');

const elements = [
  {
    x: 10, y: 10, width: 100, height: 100, type: 'draw',
    contextOptions: {globalAlpha: 0.5, fillStyle: "#85C1E9"},
    elementOptions: {positionFixed: false}
  }
];

let infinityCanvas = new ICanvas(container, {
  elements: elements,
  drawWidth: 500,
  drawHeight: 500,
});