Q: HTML5 Canvas change background color

22,971

Solution 1

What you need is to change approach a little - although it's possible to some extent to "fill background", the main way canvas works is constant redrawing of the whole image. In HTML games, it's done X times per second, but in smaller projects, it often should be done after each action. So, in your case, something like this should probably do the trick: FIDDLE

var canvas = document.getElementById('canvas')
var context = canvas.getContext('2d');

function initCanvas() {
  context.clearRect(0, 0, window.innerWidth,window.innerHeight);

  context.fillStyle = 'rgba(0,0,0,0.5)';
  context.fillRect(0,0,window.innerWidth,window.innerHeight);
}

function circle() {
  var centerX = 0;
  var centerY = 0;
  var radius = 78;

  context.save()
  context.translate(canvas.width / 2, canvas.height / 2);

  context.scale(1.5, 2);

  // define the arc path
  context.beginPath();
  context.arc(centerX, centerY, radius, 0, 5 * Math.PI, false);

  // stroke it
  context.lineWidth = 5;
  context.stroke();

  // make alpha solid (the color doesn't matter)
  context.fillStyle = 'rgba(0,0,0,1)';

  // change composite mode and fill
  context.globalCompositeOperation = 'destination-out';
  context.fill();
  context.restore()

  // reset composite mode to default
}

function changeColor() {
  context.fillStyle = 'rgba(0,255,0,1)';
  context.fillRect(0,0,window.innerWidth,window.innerHeight);

  circle()
}

initCanvas()
circle()
document.querySelector('#but').addEventListener('click',changeColor)

And pay attention to save/restore, especially after transforms/rotating. Also, fixed onclick.

Solution 2

To set the canvas element background color you use

canvas.style.background = "red";  // a valid CSS colour.

You are filling the canvas with a transparent colour, if you want a colour that is the result of the element's background colour and the transparent fill you need to calculate the correct background colour that when combined gives you the colour you want.

To help this answer shows how to calculate blended colours. Matching DOM colour blending

Solution 3

The lines

context.fillStyle = 'rgba(0,0,0,0.5)';
context.fillRect(0,0,window.innerWidth,window.innerHeight);

are setting your background color to black at 50% opacity (which about the same as #808080 or rgb(128,128,128)) Change this to have a different background color

Share:
22,971
user2808421
Author by

user2808421

Updated on April 18, 2020

Comments

  • user2808421
    user2808421 almost 4 years

    I am just wondering is it possible to change Canvas color from function call? I have this code with circle inside I would like to change outside color (background):

    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()
    

    JsFiddle

  • user2808421
    user2808421 almost 7 years
    Thanks, I tried but seems it does not work in my situation.jsfiddle.net/cs7ezuzf/2
  • user2808421
    user2808421 almost 7 years
    Thanks for the answer, but I need to have opacity.
  • Admin
    Admin almost 7 years
    Please remember you've to redraw the circle every time when background color is changed. You can see the circle() function called inside changeColor() function in this answer.
  • Kevin Sijbers
    Kevin Sijbers almost 7 years
    You can still have that obviously, you can change the rgba(0,0,0,0.5) to anything else