up vote 1 down vote favorite

what I'm trying to do is this

    $.each($(".canvas"), function(n) {
        var canvas = $(this)[0].getContext("2d");     
        canvas.drawImage(options[n]);
    });

where options would be an array of arguments, but can't figure out how should the array be formatted for it to work

obviously not

['img, 0,  0, 70, 17, 21, 16, 70, 17', 'img, 0,  0, 80, 12, 21, 16, 70, 17']

this neither

[''+img+', 0,  0, 70, 17, 21, 16, 70, 17', ''+img+', 0,  0, 80, 12, 21, 16, 70, 17']

nor this 

{0: [img, 0,  0, 70, 17, 21, 16, 70, 17]}

this would not work either

var options = [[img, 0,  0, 70, 17, 21, 16, 70, 17],
               [img, 0, 16, 70, 17, 21, 16, 70, 17],
               [img, 0, 32, 70, 17, 21, 16, 70, 17],
               [img, 0, 48, 70, 17, 21, 16, 70, 17]];

img.onload = function() {
    $.each($(".canvas"), function(n) {
        var canvas = $(this)[0].getContext("2d");     
        canvas.drawImage(options[n].join(', '));
    });
};

the error is alway Uncaught TypeError: Type error or Uncaught TypeError: Illegal invocation

share|improve this question
78% accept rate
1  
drawImage takes several arguments, not just one which is a string. foo(a, b) is different than foo('a, b'). Only because there a commas in the string does not make it a list of arguments. – Felix Kling Jul 10 '11 at 14:54
feedback

1 Answer

up vote 3 down vote accepted

Use Function.apply.

canvas.drawImage.apply(canvas, options[n]);

Where options[n] looks something like

[img, 0, 0, 70, 17, 21, 16, 70, 17]

Full example:

var options = [[img, 0,  0, 70, 17, 21, 16, 70, 17],
               [img, 0, 16, 70, 17, 21, 16, 70, 17],
               [img, 0, 32, 70, 17, 21, 16, 70, 17],
               [img, 0, 48, 70, 17, 21, 16, 70, 17]];

$(img).load(function()
{
    $(".canvas").each(function(n)
    {
        var canvas = this.getContext('2d');     
        canvas.drawImage.apply(canvas, options[n]);
    });
});

Demo: http://jsfiddle.net/mattball/5EQbC/

share|improve this answer
options has to have the right structure though. And img must be a DOM element afaik. – Felix Kling Jul 10 '11 at 14:52
jsfiddle.net/w7MF7 Uncaught TypeError: Illegal invocation – foxx Jul 10 '11 at 14:55
2  
@foxx: You have to use canvas.drawImage.apply(canvas, options[n]); (pass canvas as first argument). – Felix Kling Jul 10 '11 at 14:57
@Felix thanks for the fix. – Matt Ball Jul 10 '11 at 15:00
lovely, did try apply() before, but with this instead of canvas, stupid me, thanks – foxx Jul 10 '11 at 15:03
feedback

Your Answer

 
or
required, but never shown
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.