Canvas stroke text for every object in array but draw just one image

I am trying to draw small image on canvas and some text for every person which I have in array. I am doing like this

function drawPersonsOnCanvas(canvas, persons) {
    var workIcon = '../images/work.png';
    var partyIcon = '../images/party.png';

    var context = canvas.getContext('2d');
    var width = canvas.width;
    var height = canvas.height;
// randomizePositions just put every object of array on random position inside canvas
    persons = randomizePositions(persons, width, height);
    for (var i in persons) {
        var person= persons[i];

        person['image'] = new Image();
        person['image'].src = (person['type'] === 'work') ? workIcon: partyIcon;
        person['image'].onload = function() {
            context.drawImage(person['image'], person['x'], person['y']);
        };
        context.strokeText('person ' + person['status'], person['x'], person['y']);
    }
}

and I always get all texts on map on good positions and just one image and x and y are different for all ( I have 5 persons in array, I tried and without onload but it doesn't work). Does anyone know what to change so I get one picture for every person?

Answers


By the time each onload is executed, your person variable has already been reassigned to the next element in persons.

So you need to create a new person variable inside onload.

To do this, add an index to your person[‘image’] that points to the correct person.

    …
    person['image'].index=i;
    person['image'].src = (person['type'] === 'work') ? workIcon: partyIcon;
    …

Then inside onload you can recreate the correct person:

        var person=persons[this.index];

So your reworked code looks like this...and a Fiddle: http://jsfiddle.net/m1erickson/xms9B/

function drawPersonsOnCanvas(canvas, persons) {

    var workIcon = '../images/work.png';
    var partyIcon = //'../images/party.png';

    var context = canvas.getContext('2d');
    var width = canvas.width;
    var height = canvas.height;
// randomizePositions just put every object of array on random position inside canvas
    persons = randomizePositions(persons, width, height);
    for (var i in persons) {
        var person= persons[i];
        person['image'] = new Image();
        person['image'].onload = function() {
            var person=persons[this.index];
            context.drawImage(person['image'], person['x'], person['y']);
            context.strokeText('person ' + person['status'], person['x'], person['y']);
        };
        person['image'].index=i;
        person['image'].src = (person['type'] === 'work') ? workIcon: partyIcon;
    }
}

Need Your Help

GC overhead limit exceeded when reading large xls file

java apache-poi jxl

When I run my project in Netbeans IDE (compiling it and testing it), it works fine. It enables me reading xls file with size of 25000 rows and extract all the infromation above, then save them into

Is it safe to redirect to the same URL?

http browser compatibility

I have URLs of the form http://domain/image/⟨uuid⟩/42x42/some_name.png. The Web server (nginx) is configured to look for a file /some/path/image/⟨uuid⟩/thumbnail_42x42.png, and if it does not exist...