'How to Covert Point on Canvas to CSS "Top" and "Left"

I have a canvas element that does not take up the entire screen, and I want to put a button at a certain point on the canvas where I'm also drawing something else. To find this point on the canvas in my js code I use x = "context.width/2" and y = "context.height/2 - 45". Is there a way to convert this point to pixels for use in my css?

EDIT

I added a snippet to show the issue, I need the button (pink circle) and the drawing (gray circle) to be centered around the same point on any screen size.

var canvas = document.getElementsByClassName("game");
var parent = document.getElementsByClassName("gameCont");
canvas[0].width = parent[0].offsetWidth;
canvas[0].height = document.body.clientHeight;


const context = document.querySelector("canvas").getContext("2d");
context.width = document.body.clientWidth; //document.width is obsolete
context.height = document.body.clientHeight; //document.height is obsolete

//Button SETUP
var guess_button = document.getElementById("h3");
let y = context.height/2 + 45;
let x = context.width/2;
guess_button.style.top = `${y}px`;
guess_button.style.left = `${x}px`;
guess_button.style.position = 'absolute'
guess_button.style.transform = "translate(-50%, -50%)"

// Creates the backdrop for each frame
  context.fillStyle = "#201A23";
  context.fillRect(0, 0, context.width, context.height); // x, y, width, height
  
  // Creates and fills the circle for each frame
  context.fillStyle = "#8DAA9D"; // hex for circ color
  context.beginPath();
  context.arc(context.width/2, context.height/2 - 45, 30, 0, 2 * Math.PI);
  context.fill();

@import url('https://fonts.googleapis.com/css?family=Montserrat:900i&display=swap');

h1 {
  text-align: center;
}

h2 {
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 4vw;
    letter-spacing:0.1em;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: white;
  color: white;
  text-shadow:
                        1px 1px #ff1f8f,
                        2px 2px #000000;
}

footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: transparent;
  text-align: center;
  /*position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;   */         /* Footer height */
}

p {
  text-align: center;
}

body {
  height: 100%;
  block-size: 100%;
  min-height:100vh;
  font-family: 'Montserrat', sans-serif;
}

img {
  float: center;
  width: 30vw;
  height: 25vw;
  object-fit: scale-down;
}

h1{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 4vw;
    letter-spacing:0.1em;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: white;
  text-shadow:
                        2px 2px #ff1f8f,
                        4px 4px #000000;
}
/*
h3{
  position: absolute;
  top: 62%;
  left: 50%;
  transform: translate(-50%, -50%);

}*/

.round-button {
  width: 6vw;
  font-size: 22vw;
}

.round-button-circle {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  border-radius: 100%;
  border: 1px solid white;
  overflow: hidden;
}

.round-button-circle {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  border-radius: 100%;
  border: 1px solid white;
  overflow: hidden;
  background: transparent;
  box-shadow: 0 0 5px #ff1f8f;
}

.round-button-circle:hover {
  background: gray;
}
/*
.round-button a {
  display: block;
  float: left;
  width: 80%;
  padding-top: 50%;
  padding-bottom: 50%;
  line-height: .5em;
  margin-top: -0.5em;
  text-align: center;
  color: gray;
  font-family: Verdana;
  font-size: .5em;
  font-weight: bold;
  text-decoration: none;
}
*/
button {
  float: center;
  color: black;
  text-align: center;
  padding: 4px;
  text-decoration: none;
  font-size: 16px;
  line-height: 25px;
  border-radius: 4px;
}

button:hover {
  background-color: #ddd;
  color: black;
}

/* Style the active/current link*/
button.active {
  background-color: dodgerblue;
}

#gameCont{
  display: flex;
  float: center;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  block-size: 100%;
  width: 100%;
  height: 100%;
}

.game{
  margin-right: auto;
  margin-left: auto;
  display: block;
  float: center;
  block-size: 100%;
  align-items: center;
  flex-direction: column;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

.center {
  width: 50%;
}

.header {
  overflow: hidden;
  background-color: #f1f1f1;
  padding: 20px 10px;
}

/* Style the header links */
/*
.header a {
  float: left;
  color: black;
  text-align: center;
  color: #ff1f8f;
  padding: 12px;
  text-decoration: none;
  font-size: 40px;
  line-height: 25px;
  border-radius: 4px;
}
*/

.header a {
  float: left;
  color: black;
  text-align: center;
  color: #ff1f8f;
  padding: 12px;
  text-decoration: none;
  font-size: 45px;
  line-height: 25px;
  border-radius: 4px;
  letter-spacing:0.1em;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: white;
  color: white;
  text-shadow:
                        2px 2px #ff1f8f,
                        4px 4px #000000;
}

.header button {
  float: left;
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  line-height: 25px;
  border-radius: 4px;
}
/* Style the logo link (notice that we set the same value of line-height and font-size to prevent the header to increase when the font gets bigger */
.header v.logo {
  font-size: 25px;
  font-weight: bold;
}

/* Change the background color on mouse-over */
.header button:hover {
  background-color: #ddd;
  color: black;
}

/* Style the active/current link*/
.header button.active {
  background-color: dodgerblue;
  color: white;
}

/* Float the link section to the right */
.header-right {
  float: right;
}

/*
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 812px)
  and (-webkit-min-device-pixel-ratio: 3) {
  .keyboard-button{
     font-size: 1rem;
  font-weight: 600;
  padding: 0.1rem;
  transform: translate(10%, 0%);
  }
  .first-row {
    position: relative;
    overflow: auto;
    transform: translate(10%, 0%);
  }

  .second-row {
    margin: 0.5rem 0;
    position: relative;
    overflow: auto;
    transform: translate(10%, 0%);
  }

  .third-row {
    position: relative;
    overflow: auto;
    transform: translate(10%, 0%);
  }
}
*/
/* Add media queries for responsiveness - when the screen is 500px wide or less, stack the links on top of each other */
/*@media screen and (max-width: 500px) {
  .header button {
    float: none;
    display: block;
    text-align: right;
  }
  .header-right {
    float: none;
  }
}
*/

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #f1f1f1;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 2px solid #888;
  width: 55%; /* Could be more or less, depending on screen size */
  text-align: center;
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

<body>
  <div class="header">
    <a href="#default" class="logo">Circuit</a>
    <!--<b href="#default" class="logo">Circuit</b>-->
    <div class="header-right">

      <button onclick="reset()">Restart</button>
      <button id="about" >How To</button>
      <script>
        function reset() {
        }
      </script>
    </div>
  </div>
  <h1 id="h1"></h1>
  <h3 id="h3">
    <div class="round-button">
      <div class="round-button-border"></div>
      <div class="round-button-circle"><!--<a href="" class="round-button">Guess</a>--></div>
    </div>
  </h3>
  <div class="gameCont">
    <canvas class="game"></canvas>
  </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <script src="script.js" type="module"></script>
  </body>

Solution 1:^[1]

If you want an overlapping button That is absolute to the whole page. Something like this

// using your y and x variables
y = y - 45
let btn = document.createElement('button')

// assign style directly with js
btn.style.left = `${x}px`
btn.style.top = `${y}px`
btn.style.position = 'absolute'
btn.style.textContent = 'yada yada'

document.body.append(btn)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	jakob_a

'How to Covert Point on Canvas to CSS "Top" and "Left"

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]