title: How to Centre an object in any cell of an 8x8 grid in p5.js framework
body: <p>This is my code of making a chess game.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let pawn1; //variable for object
  var offset = 10;
  function setup(){
   createCanvas(600,600); // canvas
   pawn1 = new Pawn(); // pawn1 is a new Pawn object
  }
  
  function draw(){
   background(0); //black background
   checkboard();  //to make an 8x8 grid 
   pawn1.show();  //shows pawn1 object on canvas
   drag();        //allows the pawn object to be dragged
  }
  
  function Pawn(){
   this.x = 25; // x position of object
   this.y = 25; // y position of object
   this.w = 20; // width of object
   this.h = 20; // height of object
  
   this.show = function(){
    fill(255); // object is white
    rect(this.x, this.y, this.w, this.h); //object is a rectangle with x,y,w,h variables
   }
  }
  
  // grid maker function
  function checkboard(){
   for (var x = 0; x &lt; width; x += width / 8) {
    for (var y = 0; y &lt; height; y += height / 8) {
     stroke(255); //grid lines is white
     strokeWeight(1); // lines drawn are 1 units thick
     line(x, 0, x, height); // vertical lines
     line(0, y, width, y); // horizontal lines
    }
   }
  }
  
  function drag(){
      // if mouse is clicked down and inside of the dimensions of the object then:
   if(mouseIsPressed){
    if(mouseX &gt; pawn1.x &amp;&amp; mouseY &gt; pawn1.y){
     if(mouseX&lt;(pawn1.x+pawn1.w) &amp;&amp; mouseY&lt;(pawn1.y+pawn1.h)){
                  //square will move with the mouse pointer 
      pawn1.x = mouseX - offset;
      pawn1.y = mouseY - offset;
     }
    }
   }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I do not have any idea of how to make sure when the <strong>dragged object is dropped, that it will be centered in the cell it has been dropped in.</strong> I suppose the code would go in the " <em>drag</em> function " as an else statement but other than that I am stuck. Can anyone help?</p>
  
  <p>Thanks in advance!</p>