title: Canvas draggable with kineticJS and Clip function
body: <p>I've a problem which deals with <code>canvas</code>. </p>
  
  <p>I would like to use <code>kinetic</code> to use mobile events (most particularly for draggable) and I would also like to use the <code>clip()</code> function at the same time.</p>
  
  <p>Here is my code : </p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;style&gt;
        canvas {
          border: 1px solid #9C9898;
        }
      &lt;/style&gt;
      &lt;script src="kinetic-v3.9.4.js"&gt;&lt;/script&gt;
      &lt;script&gt;
        window.onload = function() {
          var stage = new Kinetic.Stage({
            container: "container",
            width: 708,
            height: 500
          });
          var layer = new Kinetic.Layer();
  
          var circle1 = new Kinetic.Circle({
            x: 150,
            y: 150,
            radius: 75,
            fill: "red",
            draggable: true
          });
  
          var circle2 = new Kinetic.Circle({
            x: 350,
            y: 150,
            radius: 75,
            fill: "blue",
          });
  
          layer.add(circle2);
          layer.add(circle1);
          stage.add(layer);
        };
  
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body onmousedown="return false;"&gt;
      &lt;div id="container"&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I've the first circle draggable but I would like to use it and the <code>clip function</code> but I don't really know how to do it. In addition, I tried to get the 2d context like this: </p>
  
  <p><code>var context = this.getContext();</code></p>
  
  <p>But it didn't work. If there's someone that can help me thanks. </p>
  
  <p>I also saw this <a href="http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-clipping-regions/" rel="nofollow">example</a> but it doesn't work with mobile devices.</p>