How to build a clickable button using canvas?

1

<canvas id="buttonCanvas" width="200" height="50"></canvas>

1
2

const canvas = document.getElementById('buttonCanvas');
const ctx = canvas.getContext('2d');

1
2
3
4
5

const buttonWidth = 200;
const buttonHeight = 50;
const buttonText = 'Click Me';
const buttonColor = '#3498db';
const textColor = '#ffffff';

1
2
3
4
5
6

ctx.fillStyle = buttonColor;
ctx.fillRect(0, 0, buttonWidth, buttonHeight);

ctx.font = '20px Arial';
ctx.fillStyle = textColor;
ctx.fillText(buttonText, buttonWidth / 2 - ctx.measureText(buttonText).width / 2, buttonHeight / 2 + 10);

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

canvas.addEventListener('click', function(event) {
  const rect = canvas.getBoundingClientRect();
  const x = event.clientX - rect.left;
  const y = event.clientY - rect.top;

  if (x >= 0 && x <= buttonWidth && y >= 0 && y <= buttonHeight) {
    // Button clicked, do something
    alert('Button clicked!');
  }
});

1
2
3
4
5
6
7

canvas.addEventListener('mouseover', function() {
  canvas.style.cursor = 'pointer';
});

canvas.addEventListener('mouseout', function() {
  canvas.style.cursor = 'default';
});