javascript functions arguments in an array

Question

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

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
– Felix Kling, Commented Jul 10, 2011 at 14:54

Matt Ball · Accepted Answer · 2011-07-10 15:00:49Z

4

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/

edited Jul 10, 2011 at 15:00

answered Jul 10, 2011 at 14:51

Matt Ball

361k102 gold badges655 silver badges725 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Felix Kling Over a year ago

options has to have the right structure though. And img must be a DOM element afaik.

Felix Kling Over a year ago

@foxx: You have to use canvas.drawImage.apply(canvas, options[n]); (pass canvas as first argument).

fxck Over a year ago

lovely, did try apply() before, but with this instead of canvas, stupid me, thanks

Collectives™ on Stack Overflow

javascript functions arguments in an array

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related