Flip <canvas> (rotate 180deg) after being published on page

问题

I'm trying to rotate a canvas element AFTER it's been appended to the DOM. Canvas is 600x50 and this is the code at hand:

var canvas = document.getElementsByTagName('canvas')[2];
var ctx = canvas.getContext('2d');
ctx.translate(300, 25); // rotate @ center

ctx.rotate(angle * Math.PI/180);

which isn't accomplishing the task. Am I missing something?

Thanks

回答1:

Dug around and found this working solution;

context.scale(1,-1); //flip vertically 
context.translate(0,-height); //move beneath original position

works wonders!

来源：https://stackoverflow.com/questions/2634456/flip-canvas-rotate-180deg-after-being-published-on-page