3 ms·
Imagine something like: var transform = ...your own data structure transform.scale(zzz); transform.rotate(zzz); transform.translate(zzz); t
by simonsarris 5y ago
Imagine something like:
var transform = ...your own data structure
transform.scale(zzz);
transform.rotate(zzz);
transform.translate(zzz);
transform.scale(zzz);
// perhaps as many as 50 as you go down the visual tree
ctx.setTransform(use your data structure to set these values);
This is a little faster than calling all the corresponding methods on ctx. Of course you gotta implement a transform class.
And of course it becomes meaningfully faster if you are drawing a large number of objects in a visual tree, and their locations do not all change, so you can save these transforms that you've created, and then the only thing you are doing in the draw loop is a single call to `ctx.setTransform` instead of all the calls you'd normally need. Again this really depends on what you're doing, but you can imagine for drawing the visual tree of a diagram, it can be quite an improvement.