2D Drawing Context with tracked pen movement and transforms
A simple wrapper around CanvasRenderingContext2D in browsers for debugging purposes and to retrieve the inverse transform.
An additional feature is that we manually scale inputs rather than have the underlying context do it. This has the advantage of preserving pattern resolution (with ctx.createPattern resolution normally degrades if you scale up the rendering context). This means we cannot support unequal scaling for x and y on radial methods (arc and createRadialGradient). In those cases we take the x scaling.
Operations not entirely supported:
- arcTo (will not be tracked, but will work)
Get by cloning the repository, or
npm install context-2d-tracked if using in Node context.
building from source
npm installnpm run build
npm installnpm test
dist/Context2DTracked.js in a script tag and use
Context2DTracked as a global variable.
Only useful is the source is ultimately used in the browser since that's the only
place where canvas and rendering contexts exist. This would be the case if the
code's passed through
webpack, for example.
const Context2DTracked = ;
Print a crosshair where the pen is currently at and return the coordinates.
ctx;ctx;ctx;ctx; // printctx;
Show the control points of bezier and quadratic curves by passing in an extra argument that's non-false to the drawing methods.
Transform points in canvas coordinate to context coordinate.
Initially, the two are the same, but after for example
(100, 100) (i.e. 100 pixels right and 100 pixels down from
the canvas' top left corner) becomes
(50,50) in context coordinates.