Editable Vinyl/Text Editor using Javascript

Hello as I’m finding ways to create and editable Vinyl or text editor I cant make it work, I want an output similar to this link https://www.stickermule.com/products/vinyl-lettering , I made one but with buttons and it worked but I want to apply it via combo box but it wouldn’t work, can someone help me? I’m using HTML CSS and JavaScript.

Here is the code i have tried

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  p {
      width: 40%;
      border: 1px solid black;
      padding: 10px;
      font-weight: bold;
      font-size: 18px;
  }
  button {
      padding: 10px 20px;
      margin: 5px;
  }
  </style>
</head>
<body>
  
  <div class="container">
    Select Color:
    <select>
      <option>Choose a Color</option>
      <option id="btnRed">Red</option>
      <option id="btnBlue">Blue</option>
      <option id="btnGreen">Green</option>
    </select>
    <textarea style="width: 25%; height: 200px;"></textarea>
  </div>

  <script>
    let btnRed = document.querySelector('#btnRed');
    let btnBlue = document.querySelector('#btnBlue');
    let btnGreen = document.querySelector('#btnGreen');
    let content = document.querySelector('textarea');
    btnRed.addEventListener('click',() => content.style.color = 'red');
    btnBlue.addEventListener('click',() => content.style.color = 'blue');
    btnGreen.addEventListener('click',() => content.style.color = 'green');
  </script>
</body>
</html>