Question

Imagine I want to transform a canvas context coordinate space to contain a certain bounding box, and that I’m writing a test around it.

Would it be possible to actually ‘use’ the context’s transformation, somewhat like this:

function toBoundingBox( context, upleft, botright ) {
   // ... 
}

// and the test function:
function test( canvaselement ) {

    var canvasbox = { 
       topleft: {x:0, y:0}, 
       botright: {x:canvaselement.width, y:canvaselement.height} };

    var ctx = canvaselement.getContext("2d");
    toBoundingBox( ctx, {x:-1,y:-1}, {x:2, y: -5} );

    var thetransform = ctx.getTransform();
    assert( thetransform( {x:-1,y:-1} ) == canvasbox.topleft );
    assert( thetransform( {x:2, y:-5} ) == canvasbox.botright );

}

Or is there any other way to write this test function?

Answer 1

Sadly there’s no native way to access transformation. You’ll need to implement this yourself. See HTML5 Canvas get transform matrix? for further info. Hopefully this helps!