Q: HTML5 Canvas change background color
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
user2808421
Updated on April 18, 2020Comments
-
user2808421 almost 4 years
I am just wondering is it possible to change
Canvas
color fromfunction 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()
-
user2808421 almost 7 yearsThanks, I tried but seems it does not work in my situation.jsfiddle.net/cs7ezuzf/2
-
user2808421 almost 7 yearsThanks for the answer, but I need to have opacity.
-
Admin almost 7 yearsPlease 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 almost 7 yearsYou can still have that obviously, you can change the rgba(0,0,0,0.5) to anything else