Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Firefox's Canvas 2D contexts have (non-standard) mozCurrentTransform and mozCurrentTransformInverse properties.</p> <p>The WhatWG have now defined currentTransform and currentTransformInverse properties (the former even being writable). Here's the relevant part of the spec:</p> <p><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#transformations" rel="nofollow">http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#transformations</a></p> <p>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.</p> <p>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.</p> <ul> <li>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.</li> <li>It intercepts setting of the currentTransform property.</li> <li>It tries hard only to do what it needs to do.</li> </ul> <p>It works in latest Chrome and Firefox, but I haven't tested it in IE yet.</p> <p>I put mine in a jsfiddle, with a simple demonstration: <a href="http://jsfiddle.net/XmYqL/1/" rel="nofollow">http://jsfiddle.net/XmYqL/1/</a></p> <p>Here is a code block to placate stackoverflow so it lets me link to jsfiddle (??):</p> <pre><code>code, code, wonderful code </code></pre> <p>I finally got around to uploading my polyfill to GitHub:</p> <p><a href="https://github.com/supermattydomain/canvas.currentTransform.js" rel="nofollow">https://github.com/supermattydomain/canvas.currentTransform.js</a></p> <p>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.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload