How to rotate the canvas by 90 degree in Firefox

Question

I’m trying to rotate the html5 canvas to 90 degree by below code snippet. It working fine in all browsers except Firefox.

var canvas = document.getElementById('pagecanvas_' + i);
var canvasUrl = canvas.toDataURL();
var context = canvas.getContext('2d');
var image = new Image();
context.save();
context.translate(canvas.width / 2, canvas.height / 2);
context.rotate(-Math.PI / 2);
image.src = canvasUrl;
context.drawImage(image, -image.width/2 , -image.height/2);
context.restore();

Please provide your idea to overcome this issue. Also let me know if I’m doing any think wrong?

"let me know if I’m doing any think wrong" Yes, you're not waiting for the image has loaded before drawing it. What is the visible problem? Is the image drawn and simply not rotated? If so, this is not your issue, but will be at some point for sure. — Kaiido, Mar 14 '16 at 11:26
Did this fixed the issue? If so, you may want to delete the question, since it was caused by a "typo" and that it's unlikely to help any further readers. (moreover there a tons of [dupe](http://stackoverflow.com/questions/32880641/canvascontext2d-drawimage-issue-onload-and-cors/32880642#32880642)) — Kaiido, Mar 14 '16 at 11:37

score 0 · Answer 1 · answered Mar 14 '16 at 14:39

It looks like you got a few things mixed up here. Load the image first, then draw the image to the canvas. You cant intermingle it like that and expect consistent, or even working, results

var canvas = document.getElementById('pagecanvas_' + i);
var canvasUrl = canvas.toDataURL();
var context = canvas.getContext('2d');
var image = new Image();
img.onload = function(){
   drawCanvas();
}
img.src = canvasUrl;

function drawCanvas(){
    context.save();
    context.translate(canvas.width / 2, canvas.height / 2);
    context.rotate(-Math.PI / 2);
    context.drawImage(image, -image.width/2 , -image.height/2);
    context.translate(-canvas.width / 2, -canvas.height / 2);
    context.restore();

}

How to rotate the canvas by 90 degree in Firefox

1 Answers1