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?