title: Canvas - Rotating my images(circles)
body: <p>I currently have a bunch of circles that i fill with a image inside a "box", they are bouncing and colliding. Now I want them to <strong>rotate</strong>.
  I have tried to get this to work but I only seem to be able to rotate the entire canvas, I only want the balls to rotate.</p>
  
  <p>This is my render-function:</p>
  
  <pre><code>  var img = new Image;
    img.onload = function() {
    render();
    console.log("asdsad");
    }
  
    img.src = "xxx.png";
  
    function render() {
    var ball;
    for (var i = 0; i &lt;balls.length; i++) {
       ball = balls[i];
       ball.x = ball.nextx;
       ball.y = ball.nexty;
       context.drawImage(img, ball.x - (img.width/2), ball.y - (img.height/2));     
    }
  </code></pre>
  
  <p>}</p>
  
  <p>GOAL: Get these balls to rotate.</p>
  
  <p><strong>EDIT</strong>: I have tried something like this, obviously I'm doing something wrong.</p>
  
  <pre><code>     context.rotate(Math.PI/180); // Should this be another value? Either way, entire canvas rotates.
       context.drawImage(img, ball.x - (img.width/2), ball.y - (img.height/2));
       //context.rotate(-Math.PI/180)
       context.restore();
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/Qd0p6.png" alt="balls"></p>