<canvas> no way to get current transformation matrix




Canvas: 2D
10 years ago
6 years ago


(Reporter: Ilmari Heikkinen, Unassigned)


Firefox Tracking Flags

(Not tracked)




10 years ago
User-Agent:       Mozilla/5.0 (X11; U; Linux i686; fi; rv: Gecko/20071127 Firefox/
Build Identifier: 

The canvas 2d context lacks a way to get the current transformation matrix, which makes it difficult (read: requires re-implementing the entire canvas transformation system in JavaScript) to do things that require knowledge of the current transformation matrix. 

I'd propose adding getTransform() to the 2d context, so that the following is a NOP: ctx.setTransform.apply(ctx, ctx.getTransform())

Examples of things that require knowledge of the current transformation matrix: mixing transformed canvas content and html elements, doing billboards (objects that only track position, not scale & rotation), changing isPointInPath mode from user-space to device-space and vice versa.

Reproducible: Always
This is actually by design -- the canvas itself may need to apply a base transform to scale the rendering in case it renders at a higher resolution than 1:1 due to CSS scaling; having that base transform returned would be confusing.  However, we could push for a currentTransform property that returns the matrix without any base transform, and have the canvas keep track of the matrix math itself.
Ever confirmed: true

Comment 2

10 years ago
Ah, so there are actually two transformation matrices. The "outer" one being the document matrix, and the "inner" one being the canvas-local. Having the canvas-local matrix would be useful for drawing on the canvas, and the outer matrix's use would be in aligning HTML elements with canvas objects and mapping mouse coordinates.

While the document matrix is pretty trivial to get at the moment ([elementWidth/canvasWidth, 0, 0, elementHeight/canvasHeight, 0, 0]), WebKit recently got affine CSS transformations. For those, having explicit access to the document matrix might be nice.

I guess the following use cases should cover the needed matrices:

  "How much do I translate this point to move it under the mouse pointer?"
    - projecting the mouse pointer to user-space

  "How much do I move this canvas point to put it under that HTML element?"
    - projecting a document space point to user-space

  "What coordinates should I give this HTML element so that it appears above that canvas point?"
    - projecting a user-space point to document space
Priority: -- → P4
Are we still interested in this RFE?
Ilmari, can you bring this up with the WHATWG? I think we should figure out exactly what we want and get everybody to do it.
Last Resolved: 6 years ago
Resolution: --- → WONTFIX
You need to log in before you can comment on or make changes to this bug.