Html5 canvas image on click

Question

I'm having a problem whit my code. I draw some circles in a circular path and I expect when to click on them to return something other than 0 in firebug console but that's not happening; I don't know what is wrong with my code and i hope someone will tell me. Here's my code:

  var canvas, ctx;
  var circle_data = [];

  function circles(x, y, radius) {
      this.x = x;
      this.y = y;
      this.radius = radius;
      circle_data.push(this);
  }
  circles.prototype = {
      draw: function (context) {
          context.beginPath();
          context.arc(this.x, this.y, this.radius / 5, 0, 2 * Math.PI, false);
          context.fillStyle = "red";
          context.fill();
      }
  }
  function draw() {
      ctx.translate(250, 250);
      for (var n = 0; n < 10; n++) {
          var radi = (Math.PI / 180);
          var x = Math.sin(radi * n * 36) * 70;
          var y = Math.cos(radi * n * 36) * 70;
          var radius = 50;
          var thiscircle = new circles(x, y, radius);
          thiscircle.draw(ctx);
      }
  }
  function mouseDown(e) {
      var img_data = ctx.getImageData(e.pageX, e.pageY, 1, 1);
      console.log(img_data.data[3]);
  }

  function init() {
      canvas = document.getElementById('canvas'),
      ctx = canvas.getContext('2d');
      canvas.addEventListener('mousedown', mouseDown, false);
  }

init();

It dosen't matter is i use data[3]; I tried whit console.log(img_data.data[0]+" "+img_data.data[1]+" "+img_data.data[2]); Still getting 0 0 0

I'm assuming you know that data[3] which your retrieving from the img_data is the alpha value of the pixel your clicking on... — Dpolehonski
– Dpolehonski, Commented Aug 13, 2012 at 16:07

Dpolehonski · Accepted Answer · 2012-08-14 10:37:43Z

Your detecting the mouse position relative to the page and not the canvas, you need to get the position of the canvas on the page and subtract that from the X and Y of the mouse to find you position relative to the canvas. I use functions similar to the ones below when working with canvas.

getOffsetPosition = function(obj){
            /*obj is the Canvas element*/ 
        var offsetX = offsetY = 0;

        if (obj.offsetParent) {
            do {
                offsetX += obj.offsetLeft;
                offsetY += obj.offsetTop;
            }while(obj = obj.offsetParent);
        }   
        return [offsetX,offsetY];
    }

getMouse = function(e,canvasElement){
        OFFSET = getOffsetPosition(canvasElement);

        mouse_x = (e.pageX || (e.clientX + document.body.scrollLeft +  document.documentElement.scrollLeft)) - OFFSET[0];
        mouse_y = (e.pageY || (e.clientY + document.body.scrollTop + document.documentElement.scrollTop)) - OFFSET[1];  

        return [mouse_x,mouse_y];
    }

The following code works.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<canvas id="canvas" width="500" height="500" style="background-color:#999999;"></canvas>
</body>
<script>
var canvas,ctx;

var circle_data = [];
function circles(x,y,radius)
{
this.x = x;
this.y = y;
this.radius = radius;
circle_data.push(this);

}


circles.prototype = {

draw: function(context){





context.beginPath();
context.arc(this.x, this.y, this.radius / 5, 0, 2* Math.PI, false);
context.fillStyle = "red";
context.fill();



}
}

getOffsetPosition = function(obj){
/*obj is the Canvas element*/ 
var offsetX = offsetY = 0;

if (obj.offsetParent) {
do {
offsetX += obj.offsetLeft;
offsetY += obj.offsetTop;
}while(obj = obj.offsetParent);
}   
return [offsetX,offsetY];
}

getMouse = function(e,canvasElement){
OFFSET = getOffsetPosition(canvasElement);

mouse_x = (e.pageX || (e.clientX + document.body.scrollLeft +  document.documentElement.scrollLeft)) - OFFSET[0];
mouse_y = (e.pageY || (e.clientY + document.body.scrollTop + document.documentElement.scrollTop)) - OFFSET[1];  

return [mouse_x,mouse_y];
}



function draw(){


ctx.translate(250, 250);
for (var n = 0; n < 10; n++) {
var radi = (Math.PI/180);
var x = Math.sin(radi*n*36)*70;
var y = Math.cos(radi*n*36)*70;
var radius = 50;
var thiscircle = new circles(x,y,radius);
thiscircle.draw(ctx);
}



}


function mouseDown(e)
{

var pos = getMouse(e,ctx.canvas);
var img_data = ctx.getImageData(pos[0],pos[1],1,1);

console.log(img_data.data[3]);

}

function init() {

canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d');
draw();



canvas.addEventListener('mousedown', mouseDown, false);

}

init();

</script>
</html>

Collectives™ on Stack Overflow

Html5 canvas image on click

init();

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

init();

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related