javascript : 캔버스에서 버튼을 정렬하고 스타일을 지정하는 방법은 무엇입니까?

let canvas= document.getElementById("canvas");
    let context= canvas.getContext("2d");
    //for canvas size
    var window_width= window.innerWidth;
    var window_height= window.innerHeight;
    canvas.style.background="yellow"
    canvas.width= window_width;
    canvas.height= window_height;
    let hit_counter=0;
    function randomIntFromInterval(min, max) { //min and max included
      return Math.floor(Math.random() * (max -min + 1) + min)
    }
    class Circle {
      constructor(xpos, ypos, radius, color, text) {
        this.position_x= xpos;
        this.position_y= ypos;
        this.radius= radius;
        this.text= text;
        this.color= color;
      }
      //creating circle
      draw(context) {
        context.beginPath();
        context.strokeStyle= this.color;
        context.fillText(this.text, this.position_x, this.position_y);
        context.textAlign= "center";
        context.textBaseline= "middle"
        context.font= "20px Arial";
        context.lineWidth= 5;
        context.arc(this.position_x, this.position_y, this.radius, 0, Math.PI * 2);
        context.stroke();
        context.closePath();
      }
      update() {
       this.text=hit_counter;
        context.clearRect(0, 0, window_width, window_height)
        this.draw(context);
        if ((this.position_x + this.radius) > window_width) {
          this.dx= -this.dx;
        }
        if ((this.position_x -this.radius) < 0) {
          this.dx= -this.dx;
        }
        if ((this.position_y -this.radius) < 0) {
          this.dy= -this.dy;
        }
        if ((this.position_y + this.radius) > window_height) {
          this.dy= -this.dy;
        }
        this.position_x += this.dx;
        this.position_y += this.dy;
      }
    }
    let my_circle= new Circle(100, 100, 50, 'Black', hit_counter);
      my_circle.update();
  

<button>ex1</button>    <button>ex2</button>    <button>ex3</button>    <button>ex4</button>    <button>ex5</button>    <button>ex6</button>    <button>ex7</button>    <button>ex8</button>    <canvas id="canvas"></canvas>

HTML 캔버스에서 버튼을 정렬하고 스타일을 지정하는 방법은 무엇입니까? 버튼에 CSS를 추가하려고 했지만 작동하지 않았습니다. 어떻게 해야 하나요? 캔버스 중앙에 버튼을 배치하는 방법은 무엇입니까?

<button>ex1</button>    <button>ex2</button>    <button>ex3</button>    <button>ex4</button>    <button>ex5</button>    <button>ex6</button>    <button>ex7</button>    <button>ex8</button><canvas id="canvas"></canvas>

JS 캔버스에서 버튼을 정렬하고 스타일을 지정하는 방법. 버튼에 CSS를 추가하려고 했지만 작동하지 않았습니다. 어떻게 해야 하나요? 캔버스 중앙에 버튼을 배치하는 방법은 무엇입니까?

let canvas= document.getElementById("canvas");
    let context= canvas.getContext("2d");
    //for canvas size
    var window_width= window.innerWidth;
    var window_height= window.innerHeight;
    canvas.style.background="yellow"
    canvas.width= window_width;
    canvas.height= window_height;
    let hit_counter=0;
    function randomIntFromInterval(min, max) { //min and max included
      return Math.floor(Math.random() * (max -min + 1) + min)
    }
    class Circle {
      constructor(xpos, ypos, radius, color, text) {
        this.position_x= xpos;
        this.position_y= ypos;
        this.radius= radius;
        this.text= text;
        this.color= color;
      }
      //creating circle
      draw(context) {
        context.beginPath();
        context.strokeStyle= this.color;
        context.fillText(this.text, this.position_x, this.position_y);
        context.textAlign= "center";
        context.textBaseline= "middle"
        context.font= "20px Arial";
        context.lineWidth= 5;
        context.arc(this.position_x, this.position_y, this.radius, 0, Math.PI * 2);
        context.stroke();
        context.closePath();
      }
      update() {
       this.text=hit_counter;
        context.clearRect(0, 0, window_width, window_height)
        this.draw(context);
        if ((this.position_x + this.radius) > window_width) {
          this.dx= -this.dx;
        }
        if ((this.position_x -this.radius) < 0) {
          this.dx= -this.dx;
        }
        if ((this.position_y -this.radius) < 0) {
          this.dy= -this.dy;
        }
        if ((this.position_y + this.radius) > window_height) {
          this.dy= -this.dy;
        }
        this.position_x += this.dx;
        this.position_y += this.dy;
      }
    }
    let my_circle= new Circle(100, 100, 50, 'Black', hit_counter);
      my_circle.update();