How to Calculate Center pixels(x,y) of each small square drwan within a rectangle in HTML5 canvas -

i have written code create rectangle , providing values generate rows , columns in rectangle,basically creating small squares within rectangle.

code can seen here http://jsfiddle.net/simerpreet/ndge5/1/

<h1>example</h1> <canvas id="t_canvas" style="border:1px solid #000000;" width="300" height="225"></canvas> <br/> <button id="draw">draw</button>          <script> var x=50;     var y=50;     var w = 150; //width     var h = 100; //height     var columns=3;     var rows =3;     var vnp =w/columns; //vertical next point     var hnp=h/rows;  //horizontal next point     var canvas  = document.getelementbyid("t_canvas");     var ctx = canvas.getcontext("2d"); $(document).ready(function() {      $('#draw').click(function() {      drawverticallines(parsefloat(vnp));      drawhorizontallines(parsefloat(hnp));      ctx.fillstyle = "#ff0000";      ctx.strokerect(x, y, w, h);      ctx.stroke();     }); });  function drawverticallines(np){         var np = x + np //start point of first column          while(np < w+x){             ctx.moveto(np, y);             ctx.lineto(np, y+h);             np = vnp + np;         }      }   function drawhorizontallines(np){         var np = y + np //start point of first column         while(np < h+y){             ctx.moveto(x, np);             ctx.lineto(x+w, np);             np = hnp + np;         }     }  <script> 

i have given value of rows =3 , columns =3, create tic tac toe squares.my requirement when click in small square @ postion,it should give me exact center location of particular square, iam kind of stuck here,is there kind of algorithm can this?

thanks, simer

the correct way center point can manifested in various ways in essence need do:

 var mousepos = getmousepos(canvas, evt),  // adjusted mouse position      gw = vnp * 0.5,                       // center of 1 cell      gh = hnp * 0.5,      ix = ((mousepos.x - x) / vnp)|0,      // cell index clicked      iy = ((mousepos.y - y) / hnp)|0,      cx = ix * vnp + x + gw,               // scale pixel position      cy = iy * hnp + y + gh; 

modified fiddle here

a quick breakdown of following lines (showing x, same y):

ix = ((mousepos.x - x) / vnp)|0 cx = ix * vnp + x + gw 

1. adjust grid subtracting grid's start point mouse position. gives position within grid:

   mousepos.x - x

2. quantize value index using single cell's width. |0 cuts off fractional value end integer value need next step:

   ((mousepos.x - x) / vnp)|0

3. now have integer index [0, 2] (you need boundary checks or index range check grid) multiply cell width pixel position start of grid cell:

   cx = ix * vnp

4. and add grid start position of grid cell's on-screen corner adding half cell size center of cell:

   cx = ix * vnp + gw

a bonus have indexes (ix , iy) can use array more easy check game status.