Canvas image example

HTML

<canvas id="mycanvas" width="400" height="300"></canvas>

CSS

canvas {
    border: 1px solid #000;
}

JavaScript

var canvas = document.getElementById('mycanvas');
var ctx = canvas.getContext('2d');

var img = new Image();
img.src = 'http://www.freephotosbank.com/photographers/photos1/5/med_bb124s2577.jpg';
img.onload = function() {
		drawImage(ctx, img, 100, 100, 100, 10, 0);
		drawImage(ctx, img, 100, 100, 100, 10, 90);
		drawImage(ctx, img, 100, 100, 100, 10, 180);
		drawImage(ctx, img, 100, 100, 100, 10, 270);

		drawImage(ctx, img, 200, 200, 120, 90, 0);

};

function drawImage(ctx, img, x, y, width, height, rotation) {
  ctx.save();
  ctx.translate(x, y);
  ctx.rotate(toRadians(rotation));
  ctx.drawImage(img, -(width/2), -(height/2), width, height);
  ctx.restore();
}

function toRadians(angle) {
  return angle * (Math.PI / 180);
}