javascript - Drag and Drop over grid and revert back if size is greater than grid -

this canvas element:

<canvas id="canvas" width="280px" height="280px" style="background: #fff;"></canvas> 

and element section want drag elements each grid unit of canvas.

<div id="element1" style="width:55px; height:55px; border: 1px solid; background: lightblue"></div> <div id="element2" style="width:111px; height:55px; border: 1px solid; background: lightgreen">  <div id="element1" style="width:55px; height:55px; border-right: 1px solid"></div> 

and script:

<script type="text/javascript" language="javascript"> var bw = 280; var bh = 280; var canvas = document.getelementbyid("canvas"); var context = canvas.getcontext("2d"); context.strokestyle = "black";  function drawgrid() {     (var x = 0; x <= bw; x += 56) {         context.moveto(x, 0);         context.lineto(x, 280);         context.stroke();     }     (var y = 0; y <= bh; y += 56) {         context.moveto(0, y);         context.lineto(280, y);         context.stroke();     } } drawgrid(); </script>