title: Efficiently limit the area to render graphics to on an HTML5 canvas using JavaScript
body: <p>I'm looking for a way to render graphics onto an HTML5 canvas using JavaScript, but I want to <em>only render said graphics if they're inside a pre-defined mask.</em></p>
  <p>I'm creating a GUI framework that can be used to easily and quickly create GUIs on an HTML5 canvas. I think that something that would be really nice to have is a way to render graphics inside an element, and make the element auto-crop the graphics so that they always stay inside of it. For example, I can make a rectangular element and animate a circular pulse inside of it, and as the circle extends past the outside of the element, those parts of he circle should just not render to keep it looking smooth and sharp. This is similar to what CSS does with <code>overflow: hidden;</code></p>
  <p>Now, I know that one option is to use a mask-like feature. For example, P5.js has <code>mask()</code>. However, this is very very slow. Masking a single element a single time using P5.js significantly reduces framerate, and I want to be doing  this potentially hundreds of times per frame without frame drops. I know that CSS does this <em>incredibly</em> efficiently (from my own experience working with it), but I can't seem to think of any way to make it efficient on a canvas element.</p>
  <p>I could do it pretty simply if it was just a rectangle, but I want to do this for <em>any</em> shape. For example, a circle, a star, a rectangle with rounded edges, or really any polygon at all.</p>
  <p>How can this be done? I thought of potentially rendering to an off screen canvas (which is shrunken to the size of the element in question), then render the element onto that screen using one color (let's say the background color will be white, and the shape will be black), then rendering the image we want masked onto another off screen canvas that's the same width as our other OSC, then looping through one of their image data arrays and mapping one to the other based on whether said pixel is white or black on the mask canvas.
  But........ I can't help but think that that's going to be <em>incredibly</em> slow for the computer to process. I assume that CSS somehow leverages the GPU to do this type of computation incredibly efficiently and that's why they get such an increase in performance. Is it possible for me to do the same or am I just dreaming?</p>
  <hr />
  <p>Okay, so I have found two different means of doing this (huge thank you to @Kaiido). One method is to use <code>ctx.clip()</code> while one works with <code>CanvasPattern</code>.</p>
  <p>This snippet shows both means in action:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id = "c" width = "400" height = "400"&gt;&lt;/canvas&gt;
          
  &lt;canvas id = "c2" width = "400" height = "400"&gt;&lt;/canvas&gt;
  
  &lt;script&gt;
    var canvas = document.getElementById("c");
    var ctx = canvas.getContext("2d");
  
    ctx.fillStyle = "yellow";
    ctx.fillRect(0,0,400,400);
  
    ctx.beginPath();
    ctx.arc(200,200,100,0,6);
    ctx.clip();
  
    ctx.beginPath();// This clears our previous arc from the path so that it doesn't render in when we `fill()`
  
    ctx.fillStyle = "rgb(255,0,0)";
    for(var i = 0;i &lt; 20;i++){
      for(var j = 0;j &lt; 40;j++){
        ctx.rect(i * 20 + j % 2 * 10,j * 10,10,10);
      }
    }
    ctx.fill();
  &lt;/script&gt;
  
  &lt;script&gt;
    var canvas2 = document.getElementById("c2");
    var ctx2 = canvas2.getContext("2d");
  
    ctx2.fillStyle = "orange";
    ctx2.fillRect(0,0,400,400);
  
    var osc = new OffscreenCanvas(400,400);
    var oscctx = osc.getContext("2d");
  
    oscctx.fillStyle = "rgb(255,0,0)";
    for(var i = 0;i &lt; 20;i++){
      for(var j = 0;j &lt; 40;j++){
        oscctx.rect(i * 20 + j % 2 * 10,j * 10,10,10);
      }
    }
    oscctx.fill();
  
    var pattern = ctx2.createPattern(osc,"no-repeat");
  
    ctx2.fillStyle = pattern;
    ctx2.arc(200,200,100,0,6);
    ctx2.fill();
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Which one is more efficient and better to be run hundreds of times per frame?</p>
  <hr />
  <p>Another edit:</p>
  <p>I spent about an hour messing around with it on a sandbox website, and I made this small project:
  <a href="https://www.khanacademy.org/computer-programming/-/6446241383661568" rel="nofollow noreferrer">https://www.khanacademy.org/computer-programming/-/6446241383661568</a></p>
  <p>There I run each one every millisecond and see how quickly each one updates to see which appears more efficient. <code>clip()</code> is on top while <code>CanvasPattern</code> is on the bottom. They both appear to be <em>incredibly</em> fast to me, and I feel that no matter which I chose I will have almost exactly the same results. However, <code>clip()</code> does still appear to be a <em>bit</em> faster as far as I can tell.</p>
  <p>See for yourself and let me know what you think!</p>