Debes analizar bien si necesitas obligatoriamente canvas
para tu proyecto. Dependiendo de tu gráfico podrías usar SVG y podrías añadir interactividad de una manera más sencilla.
En primer lugar debes entender qué cosa es un canvas. Un canvas
es un elemento en el que representas gráficos y textos pero en modo bitmap
. Un canvas
es como una imagen a la que le puedes variar sus pixeles usando para ello JavaScript
. Por lo tanto, cualquier elemento que dibujes en el canvas no será interactivo. Si quisieras simular que tus elementos son interactivos, deberías capturar un evento click
sobre el canvas
, analizar las coordenadas del evento y dependiendo de estas ejecutar una función o la otra, puedes encontrar varios tutoriales en internet para implementar esto. Sería algo como el siguiente snippet
:
He variado un poco el código para que fuera más dinámico enviando el canvas
y las coordenadas al constructor. No tienes que hacerlo obligatoriamente así.
var c = document.getElementById("canvas");
var divc = document.getElementById("cr");
divc.addEventListener("click", function () {
var newCanvas = new Sm(c, {x: 50, y: 100}, {x: 200, y: 100});
newCanvas.draw1();
newCanvas.draw2();
});
function Sm (canvas, coords1, coords2) {
var _scope = this;
this._canvas = canvas;
this._context = canvas.getContext("2d");
this._coords1 = coords1 || {x: 0, y: 0};
this._coords2 = coords2 || {x: 0, y: 0};
this._canvas.addEventListener("click", function (evt) {
var cOffset = this.getBoundingClientRect();
var pageX = evt.pageX - cOffset.left;
var pageY = evt.pageY - cOffset.top;
if (pageX >= coords1.x && pageX < coords2.x && pageY <= coords1.y && pageY > coords1.y - 20) {
alert("Teto 1 clicado");
}
if (pageX >= coords2.x && pageX < coords2.x + 100 && pageY <= coords2.y && pageY > coords2.y - 20) {
alert("Teto 2 clicado");
}
});
}
Sm.prototype = {
draw1: function() {
this._context.font = "20px Ubuntu";
this._context.fillText("Texto 1", this._coords1.x, this._coords1.y);
},
draw2: function() {
this._context.font = "20px Georgia";
this._context.fillText("Texto 2", this._coords2.x, this._coords2.y);
}
};
<body style="background-color: grey;">
<input id="cr" type="button" value="Crear canvas" />
<canvas id="canvas"></canvas>
</body>
Notarás que este método es inexacto y complicado de implementar. Si quieres añadir interactividad a un canvas
te recomiendo EaseLJS. Todo sería tan fácil de implementar como el siguiente snippet:
var c = document.getElementById("canvas");
var divc = document.getElementById("cr");
divc.addEventListener("click", function() {
var newCanvas = new Sm(c, {x: 50, y: 100}, {x: 200, y: 100});
newCanvas.draw1();
newCanvas.draw2();
newCanvas.update();
});
function Sm(canvas, coords1, coords2) {
var _scope = this;
this._canvas = new createjs.Stage(canvas);
this._coords1 = coords1 || {x: 0, y: 0};
this._coords2 = coords2 || {x: 0, y: 0};
}
Sm.prototype = {
draw1: function() {
var text = new createjs.Text("Texto 1", "20px Ubuntu", "#000");
text.set(this._coords1);
this._canvas.addChild(text);
text.addEventListener("click", function () {
alert("Texto 1 clicado");
});
},
draw2: function() {
var text = new createjs.Text("Texto 2", "20px Georgia", "#000");
text.set(this._coords2);
this._canvas.addChild(text);
text.addEventListener("click", function () {
alert("Texto 2 clicado");
});
},
update: function () {
this._canvas.update();
}
};
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<body style="background-color: grey;">
<input id="cr" type="button" value="Crear canvas" />
<canvas id="canvas"></canvas>
</body>