Netherworld's Pretend Minibar

    context-2d-tracked

    2.2.2 • Public • Published

    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)
    • ellipse

    Usage

    Get by cloning the repository, or npm install context-2d-tracked if using in Node context.

    building from source

    npm install
    npm run build

    demo

    npm install
    npm test

    include (browser)

    Include dist/Context2DTracked.js in a script tag and use Context2DTracked as a global variable.

    <html>
    <head>
        <meta charset="UTF-8">
        <script src="./Context2DTracked.js"></script> 
    </head>
    <body>
    <canvas id="cv" width="600" height="600" style="border:solid black 2px"></canvas>
    <script>
    const cv = document.getElementById("cv");
     
    // can use just as a global variable in the browser
    const ctx = new Context2DTracked(cv.getContext("2d"));
    </script> 
    </body>
    </html>

    include (CommonJS)

    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 browserify or webpack, for example.

    const Context2DTracked = require('context-2d-tracked');

    trace

    Print a crosshair where the pen is currently at and return the coordinates.

    ctx.beginPath();
    ctx.moveTo(20,25);
    ctx.bezierCurveTo(100,200,200,100,350,400);
    ctx.trace();    // print
    ctx.stroke(); 

    control points

    Show the control points of bezier and quadratic curves by passing in an extra argument that's non-false to the drawing methods.

    ctx.beginPath();
    ctx.moveTo(20,25);
    ctx.bezierCurveTo(100,200,200,100,350,400, true);
    ctx.stroke(); 

    transform points

    Transform points in canvas coordinate to context coordinate. Initially, the two are the same, but after for example ctx.scale(2,2) canvas coordinates (100, 100) (i.e. 100 pixels right and 100 pixels down from the canvas' top left corner) becomes (50,50) in context coordinates.

    canvas.addEventListener("click", function(e){
        e.preventDefault();
        var x;
        var y;
        if (e.pageX || e.pageY) {
            x = e.pageX;
            y = e.pageY;
        } else {
            x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
            y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
        }
        x -= cv.offsetLeft;
        y -= cv.offsetTop;
     
        console.log("canvas coordinates:  ", x, y);
        var pt = ctx.transformPoint(x, y);
        console.log("context coordinates: ", pt.x, pt.y);
    });

    Install

    npm i context-2d-tracked

    DownloadsWeekly Downloads

    18

    Version

    2.2.2

    License

    MIT

    Unpacked Size

    114 kB

    Total Files

    10

    Last publish

    Collaborators

    • johnsonzhong