title: Efficiently getting isometric grid positions within a bounding box
body: <p><img src="https://i.stack.imgur.com/PMaET.png" alt="Isometric Grid"></p>
  
  <p>I have an isometric grid system who's coordinates start from [0,0] in the left hand corner of the grid (The corner shown in the above image) with x incrementing towards the bottom of the image and y incrementing towards the top (so [0, height] would be the top corner and [width, 0] would be the bottom corner in a diamond shape with width and height being the size of the grid ie. 200 x 200 squares)</p>
  
  <p>Anyways what I need help with is getting an array of isometric grid positions that are contained within the blue box shown in the image. Short of iterating over every x,y screen pos and getting the corresponding grid position (See this question I posed earlier on how to convert from a screen position to a grid positon <a href="https://stackoverflow.com/questions/6718875/find-column-row-on-2d-isometric-grid-from-x-y-screen-space-coords-convert-equat">Get row/column on isometric grid.</a>) i'm not sure how to achieve this effeciently.</p>
  
  <p>There was a question I found earlier that is almost exactly the same <a href="https://stackoverflow.com/q/5128786/298745">Link here.</a> The answer was to render the grid to an image with different colors for each grid square and then detect what colors were present under the square, I have implemented this solution but it is quite slow! I'm almost thinking checking the grid position for each pixel in the selection box would be faster. Why oh why is javascript so slow at looping!</p>
  
  <p>I really need a mathematical solution to this problem based on my coordinate system but I can't seem to come up with something that works (and handles the selection box going off the grid as well)</p>
  
  <p>Please let me know if you need more information.</p>
  
  <p>Edit: Unfortunately the supplied answers haven't worked so far, as the selection is like having a diamond selected area on a square grid, there is really no top left, bottom right corner to iterate through unless I missed the point of the answers? I have optimized the render approach but on a large selection, it still adds a noticeable drop in frames as it loops through all the pixel checking color and getting the corresponding square</p>