title: Clipping images from a HTML5 canvas (Konva)
body: <p>I want to create a drag an drop game in Konva. Very similar to what they have here <a href="https://konvajs.github.io/docs/sandbox/Animals_on_the_Beach_Game.html" rel="nofollow noreferrer">https://konvajs.github.io/docs/sandbox/Animals_on_the_Beach_Game.html</a>. </p>
  
  <p>However I would like to have a interface for creating the game, where an author draws on a background image. Then it automatically generates the game based on those paths. </p>
  
  <p>I have this piece of code for clipping my background image.</p>
  
  <pre><code>        return _.map(this.props.areas, (area) =&gt; {
          return (
              &lt;Group
                  draggable={true}
                  clipFunc={(ctx) =&gt; {
                      canvasDrawFuncMap[area.shape](ctx, area.coords);
                  }}
              &gt;
                  &lt;Image image={image} /&gt;
              &lt;/Group&gt;
          );
      });
  </code></pre>
  
  <p>Are there any performance worries here. Considering that its redrawing the whole image each time. Then clipping it. Is there a better way to achieve this kind of clipping . </p>
  
  <p>Also right now I am manually creating my clipFunctions and defining them in a map. Is there anyway for me to use Konva to generate these functions based on Konva shapes   </p>