Холст рисует повернутое изображение

Я пытаюсь использовать javascript, чтобы сделать снимок с помощью моего iphone и нарисовать изображение на холсте. Я использую

<input type="file" capture="camera" accept="image/*" id="takePictureField">



 mobilePictureGet);

Использовать камеру. Как только я выберу картинку

document.getElementById("takePictureField").addEventListener('change', function(e) {

        if(e.target.files.length == 1 && e.target.files[0].type.indexOf("image/") == 0) {

          img.src = URL.createObjectURL(e.target.files[0]);

        }          

      }

Это срабатывает, и изображение появляется так, как я хочу, чтобы оно было в теге. (пока все хорошо), однако я рисую его на холсте, когда загружается тег img:

img.onload = function() {

       ctx.drawImage(img, 0, 0, img.width,img.height);

      }

И он кажется повернутым на 90 градусов. Я пытался

var x = width / 2;

var y = height / 2;

var angleInRadians = Math.PI / 2;



ctx.translate(x, y);

ctx.rotate(angleInRadians);

ctx.drawImage(img, -width / 2, -height / 2, img.width, img.height);

ctx.rotate(-angleInRadians);

ctx.translate(-x, -y);

Кто-нибудь знает, почему холст был бы нарисовать изображение повернутым? Любая помощь, чтобы получить картину, нарисованную правильно на холсте, очень ценится!!

Спасибо!