title: Only on Safari - canvas error: IndexSizeError (DOM Exception 1): The index is not in the allowed range
body: <p>I have no idea what is happening here but I have a canvas bug that only occurs in Safari - Chrome and Firefox are fine. </p>
  
  <p>Ive looked at questions like <a href="https://stackoverflow.com/questions/43606218/the-index-is-not-in-the-allowed-range">The index is not in the allowed range</a> but I don't think its the same issue. Error is:</p>
  
  <pre><code> IndexSizeError (DOM Exception 1): The index is not in the allowed range.
  </code></pre>
  
  <p>It is drawn here, goes away only when I comment all the drawImage lines out:</p>
  
  <pre><code>this.draw = function (bubbleShape, dx, dy) {
  
          ctx.fillStyle = this.color;
          if(this.isPerson &amp;&amp; pointCollection.points.length &gt; 0 &amp;&amp; peopleCollection.points.length &gt; 0) //people
          {
            if(!this.hasBack)
            {
              var img2 = new Image();
              img2.src = `../resources/bod${parseInt((this.ico).match(/[0-9]+/)[0], 10)}.png`;
              var mod = 1.05;
              ctx.drawImage(img2, this.originalPos.x-(this.radius+1.5), this.originalPos.y-this.radius+27, this.radius*mod, this.radius*mod);
  
            }
  
            //ctx.fillStyle = "rgba(255, 255, 255, 0)";
            ctx.drawImage(this.img, this.originalPos.x-this.radius, this.originalPos.y-this.radius, this.radius, this.radius);
              this.img.src = this.ico; //GET ICO
          }
  
  
          if (bubbleShape == "square") { //**must call any draw methods here
              ctx.beginPath();
              ctx.fillRect(this.curPos.x + dx, this.curPos.y + dy, this.radius * 1.5, this.radius * 1.5);
  
          } else if (!this.isPerson){ //THIS for normal ------------
              ctx.beginPath();
              ctx.arc(this.curPos.x + dx, this.curPos.y + dy, this.radius, 0, Math.PI * 2, true);
              ctx.fill();
  
              if(ctx.fillStyle === '#4c4c4c')
              {
              ctx.lineWidth = 4;
              ctx.strokeStyle = '#3d3d3d';
              ctx.stroke();
            }
          }
      };
  </code></pre>
  
  <p>HTML - the canvas does exist :</p>
  
  <pre><code>&lt;canvas class = "myCanvas out" height = "900"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>What is the problem here? Ive made sure the canvas is originally on display:block. What is the problem drawing images?</p>