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>
2
Answers
You need to clear the canvas and redraw everything using the
"blue"
color.You can clear the canvas using
Here a working example for your use case:
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
Another simple option using
setInterval
to allow for an animated canvaswe set the
fillStyle
in the button click event