current transform being applied by canvas

Question

How can I determine the current transform that's being applied by an html5 canvas.

It seems that it only supports two methods for dealing with transforms "transform", "setTransform" but I can't seem to discover the results of applying the transforms.

Short of tracking them all myself and duplicating the the matrix mathematics that it must be doing natively, how can I figure out the current transform?

Answer 1

I've made a wrapper which adds this method to Canvas.

http://proceduralgraphics.blogspot.com/2010/03/canvas-wrapper-with-gettransform.html

Answer 2

Firefox's Canvas 2D contexts have (non-standard) mozCurrentTransform and mozCurrentTransformInverse properties.

The WhatWG have now defined currentTransform and currentTransformInverse properties (the former even being writable). Here's the relevant part of the spec:

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#transformations

However these probably won't be universally implemented in browsers for some time yet, so if you want portability you will have to fall back to tracking the matrix manually as @Dave and @James say.

Every man and his dog seems to have written such a Canvas-transform-matrix-tracker. I just had a look at @Dave Lawrence's one; I think mine is better in a few ways, even though I'm sure it's also inferior in other ways.

• Mine doesn't require any changes to user JS code - it modifies the Canvas and context prototypes, so you just add a script tag and you're good to go.
• It intercepts setting of the currentTransform property.
• It tries hard only to do what it needs to do.

It works in latest Chrome and Firefox, but I haven't tested it in IE yet.

I put mine in a jsfiddle, with a simple demonstration: http://jsfiddle.net/XmYqL/1/

Here is a code block to placate stackoverflow so it lets me link to jsfiddle (??):

code, code, wonderful code

I finally got around to uploading my polyfill to GitHub:

https://github.com/supermattydomain/canvas.currentTransform.js

I know it's not perfect, but I'd really like to see us all work together on implementing One True Solution to this problem. I don't care if it's mine or someone else's. This corner of JavaScript/HTML5/Canvas is too much like the Balkans: a sea of partial solutions. Please, everybody, fork mine, add your changes and send me pull requests, or send me your URL so I can merge your code in, or replace mine wholesale with yours, or whatever. This is a stupid problem that I just want to nail. If we work together we can do it.

Answer 3

You can look here for the functions that affect transformation:

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#transformations

If you use the setTransform function, then the current transform matrix is set to the identity matrix, then it uses what was set.

At that point you have the current transform matrix.

Now, if you are going to reset it, then start to call the other transformation methods, if you need to know what it is, it is easy to do the math to calculate the transformation matrix, so just do the operations, using your own transformation functions, then you can set the transform, as you have calculated it.

If you can't do that, then you are currently out of luck, but this post also has the same problem, so you may want to petition to have a new function added, getTransform.

http://forums.whatwg.org/viewtopic.php?t=4164