I have a html5 canvas that I'm drawing circles with. These circles need images in the center of them, but also need to update. With the help of this SO question I have come up with this code to draw everything:
var Circle1 = new Circle((c.width / 8) + (c.width / 2), 200, eighthWidth / 2.5, Color1, "1");
var Circle2 = new Circle(c.width - eighthWidth, 200, eighthWidth / 2.5, Color2, "2");
function Circle(x, y, radius, color, name) {
this.x = x;
this.y = y;
this.radius = radius;
this.color = color;
this.name = name;
this.draw = function () {
var MiddleImage = new Image();
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
ctx.fillStyle = this.color;
ctx.fill();
ctx.closePath();
ctx.drawImage(MiddleImage, this.x - MiddleImage.width / 2, this.y - MiddleImage.height / 2);
MiddleImage.src = "/Images/" + this.name + ".png";
}
this.update = function () {
this.x += 1;
this.draw();
}
this.update();
}
This isn't drawing the image like I hope it would, but if I take it out this method like below, it does work?
function drawCircle() {
var MiddleImage = new Image();
MiddleImage.onload = function () {
var X = c.width - eighthWidth;
var Y = 200;
ctx.beginPath();
ctx.arc(X, Y, eighthWidth / 2.5, 0, 2 * Math.PI);
ctx.clip;
ctx.fillStyle = Color1;
ctx.fill();
ctx.closePath();
ctx.drawImage(MiddleImage, X - MiddleImage.width / 2, Y - MiddleImage.height / 2);
};
BankImage.src = "/Images/1.png";
requestAnimationFrame(drawCircle);
}
I have also tried using the Image.onLoad method, as I have copied the working method into the new loop. The console is showing no errors.
You can see a JSFiddle here