far-canvas

install

npm install @nextml/far-canvas

motivation

For example: translated 100'000'000px away from the center (and a scaling of 1.5) and rendering the objects that far away:

vanilla canvas exapmle at 0px translation

vanilla canvas example at 100Mpx translation

far canvas example at 100Mpx translation

1. Images, rectangles and lines are all missaligned.
2. lineWidth=8px is not rendered correctly.

usage

Node

const { far } = require("../lib.cjs/index.js");

const farAway = 100000000;
const context = far(canvas, {y: -farAway, scale: 2}).getContext("2d");

context.clearCanvas();
context.fillRect(32, farAway + 16, 128, 128);

context.canvas; // underlying canvas for which the default unit is pixels
context.s; // coordinate system
context.s.inv; // inverse coordinate system

...

Web

const canvas = document.getElementById('far');

const farAway = 100000000;
const context = far.far(canvas, {y: -farAway, scale: 2}).getContext("2d");

...

development

run example

npm run example

update version

npm version patch | minor | major