I'm working on a small isometric drawing system in JavaScript. After much help from the Gamedev section, reading old questions, I've got something working. However, it's still a little hacky. I need to fix the culling to be more straightforward and it still isn't quite getting edge tiles down correctly.I want to improve the code to ensure that:The center tile is actually centered in the drawing area.The are always enough edge tiles.The code is straight-forwardLink to live Codepen.Here is the camera drawing function:function cameraDraw(position){  var cen = {        a: position.x + position.y,        b: position.x - position.y      },      max = { //Use testSize instead of canvas size so we can see overdraw        a: Math.floor(testSize.y/(terrainImg.width/2))+1, //Adding +1 to each for better edging?? Is this normal?        b: Math.floor(testSize.x/terrainImg.width)+1      },      startPos = {        x: (((cen.a - max.a) + (cen.b - max.b))/2),        y: (((cen.a - max.a) - (cen.b - max.b))/2)      },      offset = { //Subtract 100 to show overdraw        x: (startPos.x - startPos.y) * (terrainImg.width/2) + terrainImg.width/2 + terrainImg.width/4 - 100, //+terrainImg widths for better placement        y: (startPos.x + startPos.y) * (terrainImg.width/4) + terrainImg.width/4 - 100      };  for(var a = cen.a - max.a; a < cen.a + max.a; a++)  {    for(var b = cen.b - max.b; b < cen.b + max.b+1/*I add +1 here to take care of edge issue on the bottom...Should I have to do that, if I'd done it right, above?*/; b++)    {      if ((b&1) != (a&1))        continue;       var x = (a+b)/2,          y = (a-b)/2;      world[x][y].draw(offset, position);    }  }}And here is the tile .draw function:this.draw = function(offset, p){  var drawPos = {    x: (X-Y)*(terrainImg.width/2) - offset.x,    y: (X+Y)*(terrainImg.width/4) - offset.y  };  if(X == p.x && Y == p.y)    drawPos.y -= 15;  ctx.drawImage(terrainImg, drawPos.x, drawPos.y);};
Isometric Projection and Culling
javascript;algorithm;computational geometry;graphics;canvas