Html - set different color on click function in Canvas

SumitPatel
February 17, 2024
192 views
0 votes
2 Answers

I want to change color our button are Press then canvas inside text color change.

var canvas = document.querySelector('#my-canvas');
var context = canvas.getContext('2d');

context.font = '48px serif';
context.fillStyle = 'red'; // sets text color to red
context.fillText('Example text', 20, 65);

function ChangeColor() {
  console.log("dd", context);
  context.fillStyle = "blue";
}

<!doctype html>
<html>

<head>
  <style>
    #my-canvas {
      border: 1px solid gray;
    }
  </style>
</head>

<body>
  <canvas id="my-canvas" width="300" height="100"></canvas>
  <br>
  <button onClick="ChangeColor()"> Change Font Color Blue</button>
</body>

</html>

Answers

You need to clear the canvas and redraw everything using the "blue" color.

You can clear the canvas using

context.clearRect(0, 0, canvas.width, canvas.height);

Here a working example for your use case:

const canvas = document.querySelector('#my-canvas');
const context = canvas.getContext('2d');

draw("red");

function ChangeColor() {
  clearCanvas();
  draw("blue");
}

function clearCanvas() {
  context.clearRect(0, 0, canvas.width, canvas.height);
}

function draw(color) {
  context.font = '48px serif';
  context.fillStyle = color; // sets text color to whatever was passed in
  context.fillText('Example text', 20, 65);
}

<!doctype html>
<html>

<head>
  <style>
    #my-canvas {
      border: 1px solid gray;
    }
  </style>
</head>

<body>
  <canvas id="my-canvas" width="300" height="100"></canvas>
  <br>
  <button onClick="ChangeColor()"> Change Font Color Blue</button>
</body>

</html>

Simplest code I can come up with is to move the drawing to a function and have the color as a parameter, that way we can call it directly from the button click event, see sample code below

var canvas = document.querySelector('#my-canvas');
var context = canvas.getContext('2d');
context.font = '48px serif';

function draw(color) {
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.fillStyle = color; 
  context.fillText('Example text', 20, 65);
  context.fillRect(10, 10, 200, 15);
}

draw('red')

<canvas id="my-canvas" width="300" height="100"></canvas>
<br>
<button onClick="draw('blue')">Draw Blue</button>
<button onClick="draw('black')">Draw Black</button>
<button onClick="draw('yellow')">Draw Yellow</button>

Another simple option using setInterval to allow for an animated canvas
we set the fillStyle in the button click event

var canvas = document.querySelector('#my-canvas');
var context = canvas.getContext('2d');
context.font = '48px serif';
context.fillStyle = 'red';
x = 0

function draw() {
  context.clearRect(0, 0, canvas.width, canvas.height);   
  context.fillText('Example text', 20, 65);
  context.fillRect(x++ % 80, Math.sin(x/3)*8, 200, 15);
}

setInterval(draw, 50)

<canvas id="my-canvas" width="300" height="100"></canvas>
<br>
<button onClick="context.fillStyle = 'blue'">Draw Blue</button>
<button onClick="context.fillStyle = 'black'">Draw Black</button>
<button onClick="context.fillStyle = 'yellow'">Draw Yellow</button>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – set different color on click function in Canvas

Answers