Как сделать текст на холсте кликабельным / доступным?

Question

Итак, я отобразил текст на холсте html с c.fillText. Я хочу сделать так, чтобы при нажатии / наведении курсора на отображаемый текст появлялось окно, в которое мы можем вводить текст. Это возможно?

var canvas = document.querySelector('canvas');
canvas.width = "1290";
canvas.height = "580";
var c = canvas.getContext("2d");

function ques() {
  var question = document.getElementById("qInput").value;
  //window.alert(question);
  var randomColor = Math.floor(Math.random() * 16777215).toString(16);
  var fontSize = Math.floor(Math.random() * 45 + 12);
  var x = Math.floor(Math.random() * 1200);
  var y = Math.floor(Math.random() * 580);

  c.fillStyle = "#" + randomColor;
  c.font = fontSize + "px Times New Roman";
  c.fillText(question, x, y);
}

canvas {
	/*
  position: absolute;
	top: 9%;
	left: 2.5%;
  */
  border: 1px solid #ddd;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<p class="title">Days in the Sun</p>
<canvas></canvas>

<!--for the search bar-->
<div class="search">
  <input type="text" placeholder="Search.." name="search" id="qInput">
  <button type="submit" onclick="ques()">
		<i class="fa fa-search"></i>
	</button>
</div>

Answer 1

в таких случаях использует фреймворки, такие как Phaser / PIXI. Но если вы хотите сделать это по нативному холсту, hm:

• У вас есть x / y координаты вашего текста (относительно элемента canvas) (слева и сверху x / y)

• Вы можете получить правую и нижнюю координаты текста, используя:

  var canvas=document.getElementById("canvas");
  var ctx=canvas.getContext("2d");
  ctx.measureText(text).width/height
  

• теперь при щелчке или при перемещении мыши (аналог при наведении), просто сравните координаты курсора ( e.clientX, e.clientY) и фрейм текста, сходятся ли они.

вот больше описаний с примером, в ссылке ниже: HTML Canvas Hover Текст

Answer 2

Если я вас понимаю, вы можете сделать это с помощью:
1) Сделать указатель курсора текста с помощью CSS.

canvas{
cursor:pointer;
}

2) Использовать javaScript.

document.getElementByTagName('canvas').addEventListener('click' , myFunction);

И в этой функции вы можете использовать javasript для изменения DOM. Если вы хотите зависнуть, замените «click» на mouseover, но если вы используете mouseover, вы должны сделать другое событие на том же элементе с помощью «mouseout»