Dynamically calling Canvas Functions

Question

Is there any way to call canvas functions using apply() or a similar method, as to dynamically call canvas methods or to be able to pass an array of arguments?

Im looking for this effect context.fillRect.apply(this,args);

Answer 1

If I understand you correctly:

var op = "fillRect";    
var args = [
  10, 10, 180, 180  
];
ctx[op].apply(ctx, args);

Example: http://jsfiddle.net/eZwYQ/

Answer 2

your apply method should work just fine :

function rectangle(){
    ctx.fillRect.apply(ctx,arguments);
}

And of course this can get more "dynamic" :

function doSomethingWithCanvas(context,action,arg1,arg2/*,...argn*/){
    context[action].apply(context,Array.prototype.slice.call(arguments,2));
}

And you could use the same function to fill a rectangle, to draw a circle or to draw a simple line :

// simple line
doSomethingWithCanvas(ctx,'lineTo',10, 100);

// circle
doSomethingWithCanvas(ctx,'arc',275, 275, 200, 0, Math.PI*2, true);

// fillRect
doSomethingWithCanvas(ctx,'fillRect,10, 10, 180, 180);

PS : by providing the canvas context as an argument, you can use this function to draw on any canvas.