Rotate Image but not Canvas

Question

I am using background image in the canvas. I would like to rotate only background image by 90 degree but context should not be rotated. If I use css transform then whole canvas get rotated. How can I do ?

var can = document.getElementById('canvas');
var ctx = can.getContext('2d');
        
ctx.rect(20, 30, 200, 40);
ctx.strokeStyle="red";
ctx.lineWidth="2";
ctx.stroke();  
        
$(function(){
    //$('#canvas').css({'transform':'rotate(90deg)'});
});

#canvas{
  background: #789;
  border: 1px solid;
}
body{
  margin:10px;
}

<canvas id="canvas" width="400" height="300" style="background-image: url(http://placehold.it/1600x800); background-size: 100%; background-position: -80px -50px;">Your browser does not support HTML5 Canvas</canvas>

Answer 1

By using a pseudo :before element, you can rotate only the background image.

#canvas:before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  z-index: -1;
  background: url(http://placehold.it/1600x800) 0 0 repeat;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

(via http://www.sitepoint.com/css3-transform-background-image/)