<!-- HTML button element defined by challenge -->
<div id="button-container">
  <button id="play-button" type="button">&#9658;</button>
</div>

<!-- Canvas element this will be the new button -->
<canvas id="canvas" width="150" height="40"></canvas>

<!-- JavaScript code -->
<script>
  //YOUR CHALLENGE: create a Pen with a play button
  // Get the button element
  const button = document.getElementById("play-button");
  // Get the button text content
  const buttonText = button.textContent;
  // Remove the play button from the DOM
  button.parentNode.removeChild(button);
  // Get the canvas element
  const canvas = document.getElementById("canvas");
  // Get the 2D drawing context of the canvas
  const ctx = canvas.getContext("2d");
  // Set the fill style and draw the button background
  ctx.fillStyle = "red";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  // Set the text style and draw the button label
  ctx.fillStyle = "white";
  ctx.font = "20px Arial";
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";
  ctx.fillText(buttonText, canvas.width / 2, canvas.height / 2);
  // Set up the click counter
  let clickCount = 0;
  // Add a click event listener to the canvas
  canvas.addEventListener("click", function(event) {
    // Get the mouse position relative to the canvas
    const rect = canvas.getBoundingClientRect();
    const mouseX = event.clientX - rect.left;
    const mouseY = event.clientY - rect.top;
    // Check if the mouse click is inside the button
    if (
      mouseX >= 0 && mouseX <= canvas.width &&
      mouseY >= 0 && mouseY <= canvas.height
    ) {
      clickCount++;
      if (clickCount % 2 === 1) {
        console.log("Button clicked!", clickCount);
        scale = 1.5;
      } else {
        scale = 1;
      }
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.save();
      ctx.translate(canvas.width / 2, canvas.height / 2);
      ctx.scale(scale, scale);
      ctx.translate(-canvas.width / 2, -canvas.height / 2);
      ctx.fillStyle = "red";
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = "white";
      ctx.font = "20px Arial";
      ctx.textAlign = "center";
      ctx.textBaseline = "middle";
      ctx.fillText(buttonText, canvas.width / 2, canvas.height / 2);
      ctx.restore();
    }
  });
</script>

body {
  background-image: linear-gradient(
    210deg,
    hsl(240deg 43% 53%) 0%,
    hsl(308deg 40% 53%) 11%,
    hsl(343deg 72% 67%) 21%,
    hsl(10deg 95% 75%) 31%,
    hsl(30deg 97% 77%) 41%,
    hsl(55deg 81% 83%) 51%,
    hsl(42deg 100% 86%) 61%,
    hsl(33deg 100% 87%) 71%,
    hsl(23deg 100% 89%) 80%,
    hsl(12deg 100% 91%) 90%,
    hsl(0deg 82% 91%) 100%
  );
}

canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

button {
  align-items: top;
  min-width: 1vw;
}