使用SVGMatrix记录HTML画布2D转换

Question

I'm looking at using an HTML canvas element for a simple game, but have had trouble finding complete documentation of certain features regarding the 2D drawing context. Usually I would look at MDN , but there are still things missing from there.

In particular, even when I looked at the HTML Canvas 2D Context W3C Candidate Recommendation (which I understand to be the official word on the subject), I can't seem to find out more about using the SVGMatrix object for transformations.

Both links I've given describe transformation functions on the CanvasRenderingContext2D object that take the individual elements of a matrix as arguments. For example:

context.transform(a, b, c, d, e, f)

However, the links also have these notes:

The methods listed below remain for historical and compatibility reasons as SVGMatrix objects are used in most parts of the API nowadays and will be used in the future instead.

Most of the API uses SVGMatrix objects rather than this API. This API remains mostly for historical reasons

Despite the pages saying that most of the API now uses SVGMatrix objects instead of specifying individual matrix elements, I can't seem to find documentation for this.

Can someone point me to some official documentation, or otherwise describe the API that makes use of SVGMatrix objects instead of specifying individual matrix elements?

Answer 1

This answer may have more the form of a blurb than actual solid information, but given the circumstances I hope it still can give some input.

There is not much documentation of its usage - there are still (I believe) discussion about exposing as well as how to implement it (with canvas/paths) which is why we don´t see much of it yet. Canvas has (or had?) a method currentTransform which would return a SVGMatrix object, but it is not widely supported, or is hidden behind experimental flags (ie. in Chrome. disclaimer: may have changed recently).

You can read one thread of the discussion here .

Its use is also mentioned here (MDN) but not documented further.

I would assume in the case of canvas, that in the future you could pass in a retrieved and modified object to f.ex. setTransform() as an "overloaded" option to the existing signature (much like the Path2D object can be to stroke and fill), although there is no hint of this in the recommendation (see how it's used with SVG below for a likely usage pattern).

The object does the same as setTransform()/transform() though, you would initialize it with values for ae through the use the same methods (as the properties themselves are read-only) as with the context, so there is no difference in principle (looking at the source code for the open source browser will show exactly how it's being used).

See also this article (more for SVG and how to use the object).

To play around with the current implementation of the object itself in f.ex. console, you can do:

var matrix = document.createElementNS('http://www.w3.org/2000/svg','svg')
             .createSVGMatrix();

PS: Also feel free to check out my own matrix implementation (MIT) .