CODEWITHSUNDEEP
javascripthtmlhtml5-canvas
user2808421
user2808421

Reputation: 385

Q: HTML5 Canvas change background color

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

Upvotes: 5

Views: 33740

Answers (5)

Michał Sałaciński
Michał Sałaciński

Reputation: 2266

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.

Upvotes: 7

Blindman67
Blindman67

Reputation: 54109

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

Upvotes: 10

user7883492
user7883492

Reputation:

There's a typo in your code.

<button on_click="change_color();">

should be 

<button onClick="change_color();">

Please make this change and then try to change the background color as mentioned in other answers.

Upvotes: 1

Merunas Grincalaitis
Merunas Grincalaitis

Reputation: 859

Simply do:

<style>#myCanvas { background-color: rgba(158, 167, 184, 0.2); }</style>

You can change it with javascript. Check the same question here for more detailed responses: here

Upvotes: -1

Kevin Sijbers
Kevin Sijbers

Reputation: 834

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

Upvotes: 2

Related Questions