InfiniteCanvas wraps an HTML5 <canvas> element and allows the user to zoom, pan and rotate the contents of the canvas. Content can be drawn on the canvas using the CanvasRenderingContext2D that is returned by InfiniteCanvas's getContext method.
var canvasElement = document.getElementById("canvas");
var infiniteCanvas = new InfiniteCanvas(canvasElement);
var context = infiniteCanvas.getContext("2d");InfiniteCanvas has no dependencies that are not devDependencies.
Include InfiniteCanvas in your web page:
<script src="https://cdn.jsdelivr.net/npm/ef-infinite-canvas@0.6.6/dist/infinite-canvas.umd.cjs"></script>or install it using npm:
npm install ef-infinite-canvas
npm run build
Testing InfiniteCanvas happens on two levels. One level is the jest tests that are run using
npm run test
The other level of testing happens by (first running npm run build and then) running
npm run test-e2e
which will start a server that serves pages in which InfiniteCanvas is used, and which will then run jest tests that use Puppeteer to manipulate those pages and jest-image-snapshot to compare screenshots.
First run npm run dev-app:build once. Then npm run dev will run an app that displays all manner of use cases for InfiniteCanvas, served by Vite.
Even though not much has happened in this repository lately, I have not forgotten about it. Quite to the contrary, there are a lot more features I'm planning to add in the not-too-distant future.