MyMans

Теперь просто переворот на градусы.

var img = new Image();
var ctx;
ctx = document.getElementById("canvas").getContext('2d');
img.src = 'pinguim-root3.png';
img.onload = startNew();

здесь надо решить если, либо переворот идет сразу по загрузке либо на событие, например нажатие кнопки. Если первое то этот кусок кода не нужен.

ctx.drawImage(img, 0, 0); // загрузить картинку ровно как есть
// после нажатия кнопки отчистить
ctx.clearRect(0,0,320,320);

теперь вычисляем угол и поворачиваем

ctx.rotate(90 * Math.PI / 180);
ctx.drawImage(img,0,-100);

что же здесь происходит, почти как футураме - “двигатель двигает вселенную”.
В начале разворачиваем весь объект, целиком на 90 градусов, и на него кладем картинку.
Почему -320? Потому, что поворот вызывает смещение координат

Для начала помещаем на страницу элемент canvas

<canvas id="canvas" width="100" height="100"></canvas>

затем js

var ctx = document.getElementById("canvas").getContext("2d");
var img = new Image();
img.src = 'pw.jpg';
img.onload = startNew();

function startNew(){
	ctx.scale(1,-1);
	ctx.drawImage(img,0,-100);
}

ctx.scale(int по ширине, int по высоте);
ctx.drawImage(img,0,-100); - поместить имидж на сцену по координатам 0, -100. Почему именно 100, во-первых, это высота изображения, во-вторых, минус потому, что изменения с фотографией происходят из верхней левой точки а значит она смещается вверх.