title: Rotate a full size canvas image from a centerpoint without moving other canvas images
body: <p>the example of the code below can be viewed here - <a href="http://dev.touch-akl.com/celebtrations/" rel="nofollow">http://dev.touch-akl.com/celebtrations/</a></p>
  
  <p>What I have been trying to do is draw 2 images onto the canvas (glow and then flare. links for these images are below)</p>
  
  <p><a href="http://dev.touch-akl.com/celebtrations/wp-content/themes/beanstalk/img/flare.jpg" rel="nofollow">http://dev.touch-akl.com/celebtrations/wp-content/themes/beanstalk/img/flare.jpg</a></p>
  
  <p><a href="http://dev.touch-akl.com/celebtrations/wp-content/themes/beanstalk/img/blue-background.jpg" rel="nofollow">http://dev.touch-akl.com/celebtrations/wp-content/themes/beanstalk/img/blue-background.jpg</a></p>
  
  <p>The goal is for the 'blue-background' image to sit on the canvas at the height and width of the container, and for the 'flare' image to be drawn ontop of this image with a blending mode and rotated with an animation to create a kind of twinkle effect.</p>
  
  <p>My problem is that because the images I am using are rectangular when the 'flare' rotates at certain points you can see the edges of the layer underneath...</p>
  
  <p>What I tried to do was find the diagonal width of the container using trigonometry and draw the 'flare' image at that width so that it always covered the whole canvas but alas you can still see the background layer at some points (but much less than before).</p>
  
  <p><strong>I need a way for the flare image to always cover the whole canvas</strong>, can anyone point me in the right direction please? </p>
  
  <pre><code>  var banner = $('#banner'),
      flare = document.getElementById('flare'),
      glow = document.getElementById('glow'),
      canvas = document.getElementById("canvas"),
      ctx = canvas.getContext("2d"),
      blendMode = "multiply";
  
  $window.load(function(){
  
      _canvasWidth = banner.outerWidth(),
      _canvasHeight = banner.outerHeight();
  
      canvas.width = _canvasWidth;
      canvas.height = _canvasHeight;
  
      var _flareSum = (_canvasWidth * _canvasWidth) + (_canvasHeight * _canvasHeight);
          _flareWidth = Math.sqrt(_flareSum); 
  
      _angle = 0;
  
      setInterval(function() {
  
          _angle = _angle +0.25;
  
          // draw the bg without a blend mode
          ctx.globalCompositeOperation = "source-over";  
          ctx.drawImage(glow, 0, 0, _canvasWidth, _canvasHeight); 
          ctx.save();
  
          // clear the canvas
          // ctx.clearRect(0, 0, _canvasWidth, _canvasHeight);
  
          ctx.translate( _canvasWidth/2, _canvasHeight);  // move to center point
  
          ctx.globalCompositeOperation = blendMode;
          ctx.rotate(Math.PI / 180 * (_angle)); // 1/2 a degree
          ctx.drawImage(flare, -_flareWidth/2, -_flareWidth/2, _flareWidth, _flareWidth); // redraw ia=mages
  
          ctx.restore();
  
          //console.log(_angle)
  
      }, 1);
  </code></pre>