title: How to have a circular inner shadow for canvas shape?
body: <p>In my canvas, I have a circle shape that moves with cursor.
  I am trying to give this a little inner shadow, but it does not work.</p>
  
  <p>Here is the code and demo : <a href="http://jsfiddle.net/danials/2p9dn8ed/5/" rel="nofollow">JSFIDDLE</a></p>
  
  <pre><code>function writeMessage(canvas, message, x, y) {
      var context = canvas.getContext('2d');
      context.clearRect(0, 0, canvas.width, canvas.height);
  
      var pattern = context.createPattern(imageResized, 'no-repeat'); //Use imageResized, not imageObj.
      context.fillStyle = pattern;
      context.fill();
  
      context.font = '28pt Calibri';
      context.fillStyle = 'white';
      //context.fillText(message, x, y);
      context.beginPath();
      context.arc(x, y, 50, 0, 2 * Math.PI);
      context.stroke();
  
  
      context.beginPath();
      context.lineWidth = 5;
      context.shadowColor = 'black';
      context.strokeStyle = "rgba(0,0,0,1)";
      context.shadowBlur = 15;
      context.shadowOffsetX = 0;
      context.shadowOffsetY = 0;
      context.arc(x, y, 50, 0, 2 * Math.PI, false);
      context.stroke();
      context.restore();
  
  }
  </code></pre>
  
  <p>I notice this settings would work if I add <code>context.clip();</code> but then it would make the whole canvas crash.</p>
  
  <p>Any idea to have an inner shadow for this circle ?</p>