canvas/drawing api event listener

[barry_normal]

Hello there,

I'm not that familiar with Javascript so this hopefully is an easy
question to answer. Apologies if it's trivial but i haven't found a
simple solution elsewhere.

I have a <canvas> element on which I have drawn a number of lines
using the Line 'class' listed below.

The question is, can these lines accept event listeners? I'd like each
one to display a tool tip type message when they are moused over...

I don't seem able to get it working so any help would be greatly
appreciated.

All the best

BN

<code>
function Line(name, date, length){

// Get the canvas element.
var elem = document.getElementById(name);
if (!elem || !elem.getContext) {
return;
}

// Get the canvas 2d context.
var context = elem.getContext('2d');
if (!context) {
return;
}

context.strokeStyle = '#f6c540'; //
context.lineWidth = 2;
context.moveTo(date, 0);
context.lineTo(date, length);
context.stroke();

this.addEventListener("mouseover", handleMouse, true);


};

</code>

 

[Martin Honnen]

I'm not that familiar with Javascript so this hopefully is an easy
question to answer. Apologies if it's trivial but i haven't found a
simple solution elsewhere.

I have a<canvas> element on which I have drawn a number of lines
using the Line 'class' listed below.

The question is, can these lines accept event listeners? I'd like each
one to display a tool tip type message when they are moused over...

You could consider to use SVG (scalable vector graphics)
(http://www.w3.org/TR/SVG11/) instead of a canvas as with SVG you can
create element objects of shapes and lines and attach event listeners to
these element object e.g.

var svgNs = 'http://www.w3.org/2000/svg';
var svg = document.createElementNS(svgNs, 'svg');
svg.setAttributeNS(null, 'width', '300');
svg.setAttributeNS(null, 'height', '300');
var line = document.createElementNS(svgNs, 'line');
line.setAttributeNS(null, 'x1', '0');
line.setAttributeNS(null, 'y1', '0');
line.setAttributeNS(null, 'x2', '300');
line.setAttributeNS(null, 'y2', '300');
line.setAttributeNS(null, 'stroke', 'green');

line.addEventListener('mouseover', function(evt) { alert(evt.type); },
false);

svg.appendChild(line);
document.body.appendChild(svg);

 

[Michael Haufe (\TNO\)]

Hello there,

I'm not that familiar with Javascript so this hopefully is an easy
question to answer. Apologies if it's trivial but i haven't found a
simple solution elsewhere.

I have a <canvas> element on which I have drawn a number of lines
using the Line 'class' listed below.

The question is, can these lines accept event listeners? I'd like each
one to display a tool tip type message when they are moused over...

I don't seem able to get it working so any help would be greatly
appreciated.

All the best

BN

<code>
function Line(name, date, length){

// Get the canvas element.
var elem = document.getElementById(name);
if (!elem || !elem.getContext) {
return;

}

// Get the canvas 2d context.
var context = elem.getContext('2d');
if (!context) {
return;

}

context.strokeStyle = '#f6c540'; //
context.lineWidth = 2;
context.moveTo(date, 0);
context.lineTo(date, length);
context.stroke();

this.addEventListener("mouseover", handleMouse, true);

};

</code>

Can the lines themselves accept event listeners? No, its just pixels.
You should change your approach if you plan to support events and
such.
Each element you draw in the canvas should correspond to some
JavaScript object you've defined such as:

new Line(stuff)
new Circle(stuff)
etc.

You'll have to create a scene graph of your own and keep a list of all
the objects you drew in a list sorted by its z-index.
Attach the listener to the canvas element itself, then onWhatever
event iterate over the list you've created from highest z-index to
lowest in range of the pixel location clicked and you'll know what
element you have.

Its can be alot of work if you've never done something like it before.
It may be easier to use SVG/VML instead as it manages events, z-
indexing and such natively. Its less powerful than the canvas
approach, but maybe that's what you want.

 

[barry_normal]

Thanks to you both. The canvas approach isn't essential so I'm
abandoning it. Reluctantly because it was easy to make it look good!
But it's too much hassle to make it useful...

All the best

BN

 

[Michael Haufe (\TNO\)]

Thanks to you both. The canvas approach isn't essential so I'm
abandoning it. Reluctantly because it was easy to make it look good!
But it's too much hassle to make it useful...

All the best

Indeed it can be. It is designed to be low level enough that you could
implement your own DOM and custom (X)HTML elements if you so wish, or
some other engine