How to rotate an image that will be drawn on to canvas?

Question

so having a canvas and canvasContext I want to draw an image onto that canvas multiple times

So I have code like:

  var img = new Image();
  img.src = 'http://superior0.narod.ru/5050.png';
function drawLine(g, n, x1, y1, x2, y2){

   g.drawImage(img,x1,y1,10,10); 
}

here i do not rotate an image. I need it to be rotated in form of how line would be rotated if drawn from point x1, y1 to x2, y2.

How to do such thing in HTML5 and Javascript? (Having to use only one canvas)

You can see problem in acrion here

Answer 1

Use the rotate method of the context, taking care to invoke the rotate and translate in the correct order (which can be tricky if you're not used to matrix transformations). Quick example .