CODEWITHSUNDEEP
javascripthtmlcanvas
Quasi Pro
Quasi Pro

Reputation: 11

Html5 canvas image on click

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

Upvotes: 1

Views: 3104

Answers (1)

Dpolehonski
Dpolehonski

Reputation: 958

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>

Upvotes: 2

Related Questions