JavaScript- how do I use the 'mousedown' to 'select' an image on the canvas

Question

I have the following JavaScript mousedown function, which I'm using to detect when a 'mousedown' has been performed on one of the images I have displayed on an HTML5 canvas:

_mousedown: function(evt) {
    this._setUserPosition(evt);
    var obj = this.getIntersection(this.getUserPosition());
    if(obj && obj.shape) {
        var shape = obj.shape;
        this.clickStart = true;
        shape._handleEvent('mousedown', evt);
        displayTip(obj.shape.index);

        console.log(obj);
    }

As you can see, whenever a 'mousedown' is performed on a part of the canvas which has an object drawn to it, this function calls the function displayTip.

The displayTip function currently looks like this:

function displayTip(index){
    document.getElementById('tipsParagraph').innerHTML = tips[index];
    console.log("displayTip being called");
    console.log("canvasImage id = " + canvasImage.id);
}

Now, the mousedown function is partially working correctly, in that when it calls displayTip, this function then updates the contents of the paragraph tipsParagraph to whatever is stored in the tips array at the position index.However, as you can see, at the end of the displayTip function, I have the line

`console.log("canvasImage id = " + canvasImage.id);

and at the end of the mousedown function, I have the line

console.log(obj);

It is my understanding, that whatever object is detected at the point of the click on the canvas, will be stored in the variable obj, as determined by the line

var obj = this.getIntersection(this.getUserPosition());

But in the console, the log at the end of my displayTip() function logs that canvasImage.id is undefined, and the log at the end of my mousedown function logs that the value of the variable obj is [object Object]

I'm not sure why my canvasImage.id is undefined... it should display the ID attribute of the image that the mousedown has been detected on... any ideas why this isn't happening?

Presumably, the console log value of variable obj:[object Object] means that the mousedown has 'got hold' of the image at the position of the mousedown- so it should display the id of that object shouldn't it?

Edit 01/03/2013 @ 14:35

The code for canvas image is as follows:

It is first defined as a global variable at the start of the file, along with all of my other global variables, using the line:

var canvasImage;

The next use comes within my 'drawImage()' function, where I have used it as follows:

var canvasImage = new Kinetic.Image({
      image: imageObj,
      width: 50,
      height: 50,
      // puts the image in teh middle of the canvas
      x: randomPosition(0, 950),  //imageX,    //stage.getWidth() / 2 - 50 / 2,
      y: randomPosition(30, 350),  //imageY,    //stage.getHeight() / 2 - 50 / 2,
      draggable: true
    });

I'm not sure if this is the correct way of doing it, but what I want to do, is use the mousedown function to 'get hold' of whatever image the mousedown function is called on, and store that particular image in a variable temporarily, along with all of its attributes (id, width, height, x, y), so that I can access those attributes for use by other bits of code.

http://stackoverflow.com/questions/10001283/html5-canvas-how-to-handle-mousedown-mouseup-mouseclick — JohannesAndersson, Mar 01 '13 at 11:45

score 0 · Answer 1 · answered Mar 01 '13 at 13:23

0

"canvasImage" is not defined, and it's right ! In function you never declare this object. And for "obj" object, you should try to give us the content... because like that, it's very difficult to understand the problem.

answered Mar 01 '13 at 13:23

Metal3d

2,905
1
23
29

"canvasImage" has been defined as a global variable with the line `var canvasImage;` at the start of the file... What do you mean about the context of "obj"- the whole of it's use is there in the code sample in my original post, so that's the full context. I'll add in the code for where "canvasImage" is defined now. – Noble-Surfer Mar 01 '13 at 14:36
ok, but you say "obj is [object Object]" I mean that could be sweet to have the content of this object to help help you. – Metal3d Mar 01 '13 at 14:45
What should be happening when a `mousedown` is detected on an image, is that that image, and all of its attributes (id, height, width, x, y) are stored in the variable `obj' temporarily (i.e. just while the `mousedown` is true), so that I can access that particular image's attributes directly from this variable. – Noble-Surfer Mar 01 '13 at 15:02
Because I told you to use "console.log" you must pass only "obj" to the console, not a string:: console.log(obj). That way, you can see each object properties. BTW the markE answer seems to be nice – Metal3d Mar 05 '13 at 23:54

score 0 · Answer 2 · answered Mar 02 '13 at 06:10

Here’s how to access the attributes of your images during mouse events

Just subscribe to the mouse event you’re interested in and supply a function to call on the event.

The “this” object in your function is the Kinetic.Image object and you can call getXXX() to retrieve whatever attributes you are interested in.

        myImage.on('mouseup', function() {
          var att="Id: "+this.getId();
          att+=", width:"+this.getWidth();
          att+=", height:"+this.getHeight();
          att+=", x:"+this.getX();
          att+=", y:"+this.getY();
          att+=", image:"+this.getImage();
          alert(att);
          console.log(att);
        });

Here is code and a Fiddle: http://jsfiddle.net/m1erickson/2Qt97/

body { margin: 0px; padding: 0px; }

  function initStage(images) {

    var stage = new Kinetic.Stage({
      container: 'container',
      width: 300,
      height: 300
    });

    var layer = new Kinetic.Layer();

    var img=new Image();
    var coffee;
    img.onload=function(){
        coffee=new Kinetic.Image({
            x:125,
            y:100,
            name:"Yum!",
            id:"coffeePic",
            image:img
        });
        layer.add(coffee);
        stage.add(layer);

        coffee.on('mouseup', function() {
          var att="Id: "+this.getId();
          att+=", width:"+this.getWidth();
          att+=", height:"+this.getHeight();
          att+=", x:"+this.getX();
          att+=", y:"+this.getY();
          att+=", image:"+this.getImage();
          alert(att);
          console.log(att);
        });

    }
    img.src="http://dl.dropbox.com/u/139992952/coffee.png";

  }
  initStage();

</script>

JavaScript- how do I use the 'mousedown' to 'select' an image on the canvas

2 Answers2