title: What is a high performance way of splitting up Sprite Sheets/ Chip Sets in JS?
body: <p>I'm working on a 2d world editor for html/js, and trying to find the best way to split up a chip set (as seen below) into multiple little squares (chips).</p>
  
  <p>Currently, I'm using a method similar to the default css sprite sheets method, of using background position to move the background of many little <code>&lt;div&gt;</code> elements until each displays one square/chip of the chip set.</p>
  
  <p>It is working fine, with no big performance issues, but it seems like an overall clunky way to do it.</p>
  
  <p>Other ways I've thought of doing it would be to slice the chip set into many temporary images and make an <code>&lt;image&gt;</code> element for each, or using <code>&lt;canvas&gt;</code> instead of <code>&lt;div&gt;'s</code> or <code>&lt;image&gt;'s</code></p>
  
  <p>Anyways, I'm looking for advice on the subject:</p>
  
  <p><strong>What is a high performance way of splitting up Sprite Sheets/ Chip Sets in JS?</strong></p>
  
  <p><a href="https://i.stack.imgur.com/naZxF.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/naZxF.jpg" alt="example chip set"></a></p>
  
  <p><em>example of a chip set</em></p>