Coordinates From Mouseclick Comparison

September 28, 2023 Post a Comment

link for the code 1.the following code draws a circle on html5 canvas and adds an event listner for getting the mouse clicks. the mouse clicks inside the circle cannot be distingu

Solution 1:

A few gotchas with your existing code:

Notice that your “circle” is stretched vertically. That’s because the default size of a canvas is 300px wide and 150px high. When you use CSS to size it to 400x400 the canvas stretches disproportionally. To avoid this, either set your canvas size in the canvas tag or in javascript rather than in CSS.

// in html 
<canvas id="canvas" width="400px" height="400px"></canvas>

// in javascript (do this before any drawing)var canvas=document.getElementById(“canvas”);
canvas.width=400;
canvas.height=400;

Since you are hit-testing a circle that was generated in canvas coordinates (rather than window coordinates), you must get the position of your mouseclick in canvas coordinates too. This is a 2 step process.

First, get the position of the canvas relative to the window

var canvas=document.getElementById("canvas");
var offsetX=canvas.offsetLeft;
var offsetY=canvas.offsetTop;

Second, when handling mouseclicks you can get the canvas-relative mouse position like this:

var evt = e ? e:window.event;
clickX = evt.clientX-offsetX;
clickY = evt.clientY-offsetY;

Here is a better version of your hit-test. This uses the Pythagorean theorm to see if the mouseclick is within the radius of the circle:

var dx=cx-clickX;
var dy=cy-clickY;

if( dx*dx+dy*dy <= r*r )
{
  alert("you are inside the circle");
}

(Optionally) here is how to use javascript to listen for click events in the canvas:

canvas.addEventListener("click",handleEvent);

(Optionally) You might take a look at jQuery which is a solid, excellent library that handles cross-browser differences so you don't have to do this:

var evt = e ? e:window.event;

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

<!doctype html><html><head><linktype="text/css"media="all"href="css/reset.css" /><!-- reset css --><scripttype="text/javascript"src="http://code.jquery.com/jquery.min.js"></script><style>body{
      background: #3e3e3e;
    }
    #canvas{
      background:white;
      border: 2px solid yellow;
    }    
</style><script>window.onload=function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var offsetX=canvas.offsetLeft;
    var offsetY=canvas.offsetTop;

    var cx=canvas.width/2;
    var cy=canvas.height/2;
    var r=20;

    ctx.beginPath();
    ctx.arc(cx,cy,r,0,2*Math.PI,false);
    ctx.closePath();
    ctx.stroke();

    functionhandleEvent(e){

        var evt = e ? e:window.event;
        clickX = evt.clientX-offsetX;
        clickY = evt.clientY-offsetY;

        var dx=cx-clickX;
        var dy=cy-clickY;

        if( dx*dx+dy*dy <= r*r )
        {
          alert("you are inside the circle");
        }

        returnfalse;
    }

    canvas.addEventListener("click",handleEvent);


}; // end init;</script></head><body><canvasid="canvas"width="400px"height="400px"></canvas></body></html>

Html5 Code Review

Coordinates From Mouseclick Comparison

Solution 1:

Post a Comment for "Coordinates From Mouseclick Comparison"