Current transformation applied by canvas

Question

How to determine the current conversion applied by the html5 canvas.

It seems that it supports only two transformation processing methods "transform", "setTransform", but I can not find the results of applying the transforms.

With the exception of tracking all of them and duplicating the mathematical matrix, that it should be performed initially, how can I determine the current transformation?

Answer 1

I created a wrapper that adds this method to the Canvas.

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

Answer 2

In Firefox Canvas 2D contexts, there are (non-standard) mozCurrentTransform and mozCurrentTransformInverse properties.

Now WhatWG has defined currentTransform and currentTransformInverse properties (the first of which is even writable). Here is the relevant part of the specification:

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

However, they probably will not be universally implemented in browsers for some time, so if you want portability, you will have to return to tracking the matrix manually, as @Dave and @James say.

It seems that every man and his dog wrote such a matrix tracker Canvas-transform-matrix-tracker. I just looked at @Dave Lawrence; I think mine is better in several ways, although I am sure that it is also inferior to others.

• Mine does not require any changes in the user's JS code - it modifies the Canvas and context prototypes, so you just add a script tag and you're good to go.
• It intercepts the setting of the currentTransform property.
• He is trying to do only what is needed.

It works in the latest Chrome and Firefox, but I have not tested it in IE yet.

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

Here is a code block to settle stackoverflow, so it allows me to reference jsfiddle (??):

code, code, wonderful code 

I finally got to loading my polyfill on GitHub:

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

I know that this is not ideal, but I would really like for us all to work on implementing One True Solution to solve this problem. I don’t care whether it is mine or someone else’s. This JavaScript / HTML5 / Canvas corner is too similar to the Balkans: a sea of ​​partial solutions. Please, all, my plug, add your changes and send me pull requests or send me your url so that I can combine your code or replace my wholesale with yours or something else. This is a stupid problem that I just want to nail. If we work together, we can do it.

Answer 3

Here you can see the functions that affect the 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 transformation matrix is ​​set to the matrix unit, then it uses what was set.

At this point, you have the current transformation matrix.

Now, if you are going to reset, then start calling other conversion methods, if you need to know what it is, it is easy to calculate the transformation matrix, just to calculate the transformation matrix of the operation using your own transformation functions, then you can set the transformation as you it was calculated.

If you cannot do this, then you are out of luck for now, but this post also has the same problem, so you can ask for a new getTransform function to be getTransform .

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

Answer 4

Although this is not a solution for getting the current transform, it can be a useful fact that contexts include the save () and restore () function, which can use the push and pop contextual state, including the current transform matrix.

(At least this can benefit those who, like me, were looking for getTransform to implement the stack using it ...)