Como podría hacer 'cliqueable' si la persona, ingresa un link
para el fillText
en Canvas?
Edito: Sigo investigando y he visto que dices que puedo asociar un controlador de eventos al lienzo, luego sacar las coordenadas del texto y que si pulsa el texto, lo redirecciona, pero además mi problema es que no me sirve hacerlo para un TEXTO ESTÁTICO, entonces que debo hacer?
Con 'cliqueable' me refiero que se pueda cliquear si es una URL
, y te lleve a esa URL
abriendo otra pestaña.
Investigando leí esto, pero aun no me queda claro como hacerlo en la practica:
Puede detectar clics en el lienzo si agrega un controlador de eventos de clic al elemento canvas y, a continuación, extrae los parámetros de posición del ratón del evento, los convierte en coordenadas locales, comprueba los elementos que hace clic y realiza cualquier acción que sea necesaria.
var h = document.getElementById("go");
h.addEventListener("click",function() {
var texto = prompt("Ingresa texto a dibujar");
var context = document.getElementById("canvas");
var ctx = context.getContext("2d");
ctx.font = "20px monospace";
ctx.fillText(texto, 20, 60);
ctx.font = "40px monospace";
ctx.fillText("Creando textos..", 70, 30);
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<input value="Crear texto" type="button" id="go"/>
<canvas width="1080" height="720" id="canvas"></canvas>
</body>
</html>