在将img.src绘制到画布时如何在不影响绘制对象的情况下替换img.src？

Question

The JavaScript file is borrowed from this CodePen many thanks Jason (jsndks).

My draw function which has been edited hence the commented out section:

proto.draw = function() {
    var img = new Image();

    if (!this.context) {
        return;
    }

    this.context.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
    //this.context.strokeStyle = PARTICLE_COLOR;

    for(var i= 0; i < PARTICLE_QUANT; i++) {
        //img.src = 'http://www.clipartbest.com/cliparts/nTX/b6R/nTXb6RqTB.png';

        if (i%2 == 0){
            img.src = 'http://www.clipartbest.com/cliparts/nTX/b6R/nTXb6RqTB.png';
        }else {
            img.src = 'http://www.clker.com/cliparts/q/j/I/0/8/d/green-circle-icon-hi.png';
        }


        var particle = this.particles[i];
        //this.context.save();
        //this.context.beginPath();
        ////this.context.arc(particle.x, particle.y, ARC_RADIUS, 0, Math.PI * 2);
        //this.context.stroke();
        //this.context.restore();
        this.context.drawImage(img, particle.x , particle.y, 20 ,20);
    }

};

Any help would be appreciated. My goal is a canvas partial animation with naughts and crosses floating in the scene.

Many thanks

Answer 1

Just got help from another source, all i had to do was move the "var img = new Image();" inside the for loop.