Image rotation in Canvas

HTML

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAgCAMAAACVQ462AAAAw1BMVEX///8JKWTFKSrGKCrFKCnEJSbxzs3CIyPrycgAHVwMK2XCHB1wfp/ilJRjdZ366ugxTHuap77HNTUBIl/bhYQAG1sUM2rPUlLlqqvAFRXy2dc6VIL8+vrKPj5KYo1/jquvu8y4y9vMSUni5urYZGP5zclWapbN1+HYeXmLorzX3ONzja3l6u0AE1TTa2ogPHHnuLfEy9f82tXJW1tqhKbnsrHqk5GHl7L68fHdlJOyx9jccW+pssP2v7vuoZ/abmzVf38uyNekAAACSUlEQVRIia2VfVuqQBDFJwJpRUVZ0HgpTU3JFEmy1OzW9/9Ud3aXV5W9PU/3/OnO+e1wZAYYxwGglq0muaqIdsG0NEVRjDb0Ts4I8Q+7vWUY41swjIFATIZ9Qn8EIPT+sPtz56J9B9C2XGNwewFRB0D7g8nsA2YHOJiIcMcZYp0jLgO4/Y1duhUOoP7BzNvBLN7XpB5A6Gxesbf60CTkfh68KYjYVuI8B1DiPwS83y2Iy7ASmnjA2rIZN4/ToWeALDo363XIe2WA9MlO4iRlgHMa3TILXAAKRBFnf10GiOjc7Nl5j1xAUjmrVXfktbHFu73J7zgWgJeRZyt5dPMOXTmZD1qFOp0j7PZJknx7PKQCAHGUJFEsfl0MOyUTyFQAJLqpVyMWgNCTFIGmS3StMElLQLmWiQNUVVLBAMpv9F8Aaq3SovoCVQVNpjQDWQk0JMr/RknN71+kTqHZrMffdfDadhjGZ4CGHdr2DSxas5IpHyaCw3Tkfi9kY/e56JWHiR0Ejchw9Wm8eL0qDVMxziNxe6i6xvRx8lwdZz87Vdjp8mmdj3O2UF5El1igfzG7U1koBNdZimCra/qJiGKh0Nw+1dG+YfbznYgI8YgmXw0ZQixVwY50ZG+Wr3VLFbec6MIMNUQ8whNehGu9+nTv2cfl8lpPe2XVOlY/9+E0OudfHxZ/FJQunKTRqa72wew/+LTRHMHjZPZIc/WPzYJHd/pxxYk//7gWcVouRqfoWtSYsOiaZdFuYFpslow99GizekbwpQsQ4n3/BXW4WfNuQyR5AAAAAElFTkSuQmCC" alt="comments">
  <button>Copy image to canvas ➜</button>
  <canvas></canvas>

JavaScript

var sourceimage = document.querySelector('img');
  var button = document.querySelector('button');
  var canvas = document.querySelector('canvas');
  canvas.height = canvas.width = 0;
  var context = canvas.getContext('2d');
  button.addEventListener('click', function(ev){
    var imgwidth = sourceimage.width;
    var imgheight = sourceimage.height;
    canvas.width = imgheight;
    canvas.height = imgwidth;
    context.translate(imgheight, 0);
    context.rotate(Math.PI/2);
    context.drawImage(sourceimage, 0, 0);
  }, false);