title: Q: HTML5 Canvas change background color
body: <p>I am just wondering is it possible to change <code>Canvas</code> color from <code>function call</code>? I have this code with circle inside I would like to change outside color (background):</p>
  
  <pre><code>var canvads = document.getElementById('canvas')
  var context = canvas.getContext('2d');
  
  function circle() {
    var centerX = 0;
    var centerY = 0;
    var radius = 78;
    context.clearRect(0, 0, window.innerWidth,window.innerHeight);
  
    context.fillStyle = 'rgba(0,0,0,0.5)';
    context.fillRect(0,0,window.innerWidth,window.innerHeight);
  
    context.translate(canvas.width / 2, canvas.height / 2);
  
    context.scale(1.5, 2);
  
    context.beginPath();
    context.arc(centerX, centerY, radius, 0, 5 * Math.PI, false);
  
    context.lineWidth = 5;
    context.stroke();
  
    context.fillStyle = 'rgba(0,0,0,1)';
  
    context.globalCompositeOperation = 'destination-out';
    context.fill();
  
    context.globalCompositeOperation = 'source-over';
  }
  
  function change_color() {
    context.fillStyle = 'rgba(0,255,0,1)';
    context.fill();
  }
  
  circle()
  </code></pre>
  
  <p><a href="https://jsfiddle.net/cs7ezuzf/" rel="nofollow noreferrer">JsFiddle</a></p>