Canvas Proposal: point of origin parameter for rotate()

[MichaelMH]

I'm quite a lazy person so instead of writing pretty paragraphs I'm gonna go ahead and dump the questions in here and answer each one (not very well)

* What is the problem you are trying to solve?
I'm trying to rotate my shape (which happens to be a very funky M) around the point (50,50)

* What is the feature you are suggesting to help solve it?
I am suggesting that you add two parameters to specify the point of origin with rotate() so it would be this...

Code: Select all

rotate(angle, x, y)

* What is the processing model for that feature, including error handling? This should be very clear, including things such as event timing if the feature involves events, how to create graphs representing the data in the case of semantic proposals, etc.
Um.. I'm not quite sure about this question so I'm just going to ignore it.

* Why do you think browsers would implement this feature?
because its useful.

* Why do you think authors would use this feature?
because its easier than translating the canvas and then rotating. Its especially easier for say newbies who when learning create the first letter of their name and then wish to rotate it only to find that ever time they try to change the point of origin their image moves to.

* What evidence is there that this feature is desparately needed?
this amazing work of art [LINK] would be even more amazing if it was on a slight angle but sadly the author cannot fiqure out how to do it.

[Philip]

You can do this with a function like

Code: Select all

function rotateAround(ctx, a, x, y)
{
    ctx.translate(x, y);
    ctx.rotate(a);
    ctx.translate(-x, -y);
}

and then call e.g.

Code: Select all

rotateAround(ctx, 0.5, 50, 50)

which should produce the desired effect. (I think it'd be useful to have a library for this kind of stuff, if people find it useful but if it's not worth making part of the spec.)