JSFiddle - React, Tailwind, and code Playground

by danaya

HTML

<div class="main__div">
  <canvas id="my-canvas"></canvas>
  <input class="canvas__input" type="text" name="txt">
</div>

CSS

.main__div {
  position: relative;
}

.main__div canvas#my-canvas {
  border:1px solid black;
  width:500px;
  height:500px;
}

.main__div > * {
  display: block;
}

.canvas__input {
  background: red;
  border: none;
  position: relative;
}

JavaScript

const canvas = document.querySelector('#my-canvas');

canvas.addEventListener('mousedown', (e) => {
  const input = document.querySelector('.canvas__input');
  console.log(input);
  input.focus();
});