Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
  <script src="http://calebevans.me/projects/jcanvas/resources/jcanvas/jcanvas.js"></script>
  
<meta charset=utf-8 />
  
  <title>JS Bin</title>
</head>
<body>
  
  
<canvas id='canvas' width="675px" height="675px"></canvas>
</body>
</html>
 
canvas{
  border:2px solid black;
  background:#002b36;
}
 
var context = document.getElementById('canvas').getContext('2d');
var divisor ;
var div ={
  x:canvas.width,
  y:canvas.height
};
function gameBoard(){
  this.context = document.getElementById('canvas').getContext('2d');
  this.div ={
    x:canvas.width,
    y:canvas.height
  };
  this.setDiv = function(canvasSize){
    divisor = {
      x:0,
      y:0
    };
    var i = 25 ;
    while ( divisor.x === 0 || divisor.y === 0){
      if ( divisor.x === 0 && canvasSize.x%i===0){
        divisor.x = i;
      }
      if (divisor.y === 0 && canvasSize.y%i === 0 ){
        divisor.y=i;
      }
      i++;
    }
    this.div.x = divisor.x;
    this.div.y = divisor.y;
    console.log("div.x:"+div.x+" div.y:"+div.y);
  }
  
}
function setDiv(canvasSize){
  divisor = {
    x:0,
    y:0
  };
  var i = 25 ;
  while ( divisor.x === 0 || divisor.y === 0){
    if ( divisor.x === 0 && canvasSize.x%i===0){
      divisor.x = i;
    }
    if (divisor.y === 0 && canvasSize.y%i === 0 ){
      divisor.y=i;
    }
    i++;
  }
  div.x = divisor.x;
  div.y = divisor.y;
  console.log("div.x:"+div.x+" div.y:"+div.y);
}
function getDotCoord(clickPos,div){
  var i = 0 ;
  for ( i = 0 ; i < clickPos.x ; i+=div.x){}
  clickPos.x = i-(div.x/2);
  for ( i = 0 ; i < clickPos.y ; i+=div.y){}
  clickPos.y = i-(div.y/2);
  
  return clickPos;
}
function getMousePos(canvas,event){
  var rect = canvas.getBoundingClientRect();
  return {
    x: event.clientX - rect.left,
    y: event.clientY - rect.top
  };
}
function drawGuide(canvasSize){
  setDiv(canvasSize);
  var c = document.getElementById('canvas');
  var ctx = c.getContext('2d');
  for ( var k = 0 ; k < canvasSize.x ; k=k+div.x){
    ctx.fillStyle="#FFF";
    ctx.moveTo(k,0);
    ctx.lineTo(k,canvasSize.y);
    ctx.stroke();
  }
  
  for ( l = 0 ; l < canvasSize.y ; l=l+div.y){
    ctx.fillStyle="#000";
    ctx.moveTo(0,l);
    ctx.lineTo(canvasSize.x,l);
    ctx.stroke();
  }
}
canvas.addEventListener('mousedown', function(evt) {
  var mousePos = getMousePos(canvas, evt);
  var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
  
  
  mousePos = getDotCoord(mousePos,div);
  $("canvas").drawArc({
    fillStyle: "#FFF",
    x: mousePos.x, y: mousePos.y,
    radius: (div.x-2.5)/2
  });
}, false);
function drawRect(x,y,div){
  context.fillStyle="#FF0000";
  context.fillRect(x,y,div.x,div.y);
}
w ={
  x:canvas.width,
  y:canvas.height
};
drawGuide(w);
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
kizzlebotpro
0viewers