6

I have no idea what is happening here but I have a canvas bug that only occurs in Safari - Chrome and Firefox are fine.

Ive looked at questions like The index is not in the allowed range but I don't think its the same issue. Error is:

 IndexSizeError (DOM Exception 1): The index is not in the allowed range.

It is drawn here, goes away only when I comment all the drawImage lines out:

this.draw = function (bubbleShape, dx, dy) {

        ctx.fillStyle = this.color;
        if(this.isPerson && pointCollection.points.length > 0 && peopleCollection.points.length > 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();
          }
        }
    };

HTML - the canvas does exist :

<canvas class = "myCanvas out" height = "900"></canvas>

What is the problem here? Ive made sure the canvas is originally on display:block. What is the problem drawing images?

blue
  • 7,175
  • 16
  • 81
  • 179
  • 1
    Hi, it is fixed in new safari version but for the old ones I fixed it doing a (size - 1). Like drawImage(img2, this.originalPos.x-(this.radius+1.5), this.originalPos.y-this.radius+27, this.radius*mod - 1, this.radius*mod - 1); Try this – rasputino Apr 10 '19 at 08:33
  • 1
    @kaiidoo I think this stackoverflow question is not duplicated – rasputino Apr 10 '19 at 08:35

0 Answers0