title: Placing a letter randomly in a canvas offset by a % from border
body: <p>I have this canvas where I place a letter randomly within the canvas.</p>
  <pre><code>var w = Math.random() * canvas.width;
  var h = Math.random() * canvas.height;
  
  drawRandomCircle(canvas,w,h);
  
  function drawRandomCircle(canvas,w,h) 
  {
      
      var fontSize = '35';            
      var ctx = canvas.getContext(&quot;2d&quot;);
      
      var color = 'rgba(245, 66, 66,1.0)';
      ctx.fillStyle = color;
      ctx.font = fontSize + 'pt Arial';
      ctx.fillText('O', w, h);
      
  } 
  </code></pre>
  <p>The results:</p>
  <p><a href="https://i.stack.imgur.com/qEEpK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qEEpK.png" alt="Result 1" /></a></p>
  <p>I would like to improve further on the function to include an offset in % from the canvas boundary to limit where the letter will appear.</p>
  <p>The results would be similar to something similar to this.</p>
  <p><a href="https://i.stack.imgur.com/Ip9QE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ip9QE.png" alt="Results 2" /></a></p>
  <p>Any ideas?</p>