title: Is there an elegant way to draw shapes around the edge of a canvas?
body: <p>I want to create a seamless pattern on a canvas. I simplified the whole process down to simple rectangles. When a rectangle is drawn close to an edge of the canvas and part of it gets cut off, I want that missing part to be repeated at the other side.</p>
  
  <p>I thought I'd just check whether the rectangle to be drawn is too close to the edge, and draw it again + canvas.width/height. Halfway through I realized that this might become quite a few <code>if</code>s. </p>
  
  <p><strong>This is what I already have:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/D3viR.png" alt="this is what I have"></p>
  
  <p>This is the part where I check for the edges.</p>
  
  <pre><code>// this._draw(); is a convenience method that draws the rectangle with
  // the center as its registration point instead of top left corner.
  // which is also why I add (this.size/2) to the coordinates.
  if(this.x+( this.size/2 ) &gt; canvas.width) {
    this._draw(
      this.x+canvas.width,
      this.y
    );
  }
  
  if(this.x-( this.size/2 ) &lt;  0){
    this._draw(
      this.x+canvas.width,
      this.y
    );
  }
  
  if(this.y+( this.size/2 ) &gt; canvas.height) {
    this._draw(
      this.x-(this.size/2),
      this.y-canvas.height-(this.size/2)
    )
  }
  
  if(this.y-(this.size/2) &lt; 0){
    this._draw(
      this.x,
      this.y+canvas.height
    );
  }
  </code></pre>
  
  <p><strong>This is what I want</strong></p>
  
  <p><img src="https://i.stack.imgur.com/bzUko.jpg" alt="this is what I want"></p>
  
  <p>Is there some clever way to check this more efficiently? I'm certain that there's a more elegant approach than what I'm currently directed to.</p>
  
  <p><strong>The whole example is on <a href="http://codepen.io/noxoc/pen/f53ea0fe9afcff0a92794e7fe514c23b" rel="nofollow noreferrer">codepen.io</a>.</strong></p>