event listener on canvas in html5 issue

Question

i am new in html5 , i want to create a event listener on my mouse , i have written the following code , but cannot understand y , i cant create the event listener on my canvas element , kindly help

     var canvasDiv = document.getElementById('canvas');
     canvas_simple = document.createElement('canvas');
     canvas_simple.setAttribute('height', canvasHeight);
     canvas_simple.setAttribute('id', 'canvasSimple');
     canvasDiv.appendChild(canvas_simple);
     if(typeof G_vmlCanvasManager != 'undefined')
     {
     canvas_simple = G_vmlCanvasManager.initElement(canvas_simple);
     }
     context_simple = canvas_simple.getContext("2d");
    context_simple.addEventListener('mousemove', ev_mousemove, false);

in light of a ans i want give me event listener code also , may be it has a error also

  var started = false;
  function ev_mousemove (ev) {
  var x, y;

   if (ev.layerX || ev.layerX == 0) { // Firefox
  x = ev.layerX;
  y = ev.layerY;
  } 
  else if (ev.offsetX || ev.offsetX == 0) { // Opera
  x = ev.offsetX;
  y = ev.offsetY;
  }
  if (!started) {

  context.beginPath();
  context.moveTo(x, y);
  started = true;
  }
  else {
    context.strokeStyle = "#df4b26";
    context.lineJoin = "round";
    context.lineWidth = 10;
    context.lineTo(x, y);
    context.stroke();
     }

}

Joe · Accepted Answer · 2011-09-07T17:24:27.987

4

You want to add the event to your canvas, not the 2d context:

canvas_simple.addEventListener('mousemove', ev_mousemove, false);

Here is a demo: jsFiddle link

edited Sep 07 '11 at 17:24

answered Sep 07 '11 at 17:08

Joe

80,724
18
127
145

if u r rite than y my even listener is not working :s the event listener code is – Faizan Tanveer Sep 07 '11 at 17:11
var started = false; function ev_mousemove (ev) { var x, y; // Get the mouse position relative to the canvas element. if (ev.layerX || ev.layerX == 0) { // Firefox x = ev.layerX; y = ev.layerY; } else if (ev.offsetX || ev.offsetX == 0) { // Opera x = ev.offsetX; y = ev.offsetY; } // The event handler works like a drawing pencil which tracks the mouse // movements. We start drawing a path made up of lines. if (!started) { – Faizan Tanveer Sep 07 '11 at 17:12
context.beginPath(); context.moveTo(x, y); started = true; } else { context.strokeStyle = "#df4b26"; context.lineJoin = "round"; context.lineWidth = 10; context.lineTo(x, y); context.stroke(); } } – Faizan Tanveer Sep 07 '11 at 17:12
I'm having trouble understanding you: I hope this helps: http://jsfiddle.net/gCxcT/ – Joe Sep 07 '11 at 17:24

score 1 · Answer 2 · answered Sep 07 '11 at 17:32

1

There are a few mistakes:

You cannot attach the listener to the context, listeners can only be attached to: a single node in a document, the document itself, a window, or an XMLHttpRequest. So you should attach it to the canvas element.
You cannot nest canvas
The canvasHeight property is not defined

I created a jsfiddle with your example modified and working --> here

answered Sep 07 '11 at 17:32

jasalguero

4,142
2
31
52

well , you got right , what my code is trying to do is color where ever my mouse moves on the canvas , but the issue is only some part of my screen is active i-e canvas is colored ! – Faizan Tanveer Sep 07 '11 at 18:15
what do you mean only some part of the screen is active? – jasalguero Sep 08 '11 at 07:21
i mean is , color was only done on specific region, not the whole canvas , any how i solved it thanks alot for your help , i hope i could also give you a vote – Faizan Tanveer Sep 09 '11 at 14:14

event listener on canvas in html5 issue

2 Answers2

Linked