How to call a function to draw a stimulus using the 'manual' property in jsPsych psychophysics plugin?

Question

I have been trying to use the 'manual' object property to draw grating stimulus. I have written a function to draw the stimulus using drawFunc. However, I want to change one input parameter i.e. level of contrast using context.filter, in every trial. I would like to define the function and input parameters outside the stimulus variable and just call the function that draws the patches by giving the relevant parameters. However, that does not seem to work. I am forced to define the function everytime. Is there anyway to solve this?

var Left0 = {
    obj_type: 'manual', // means a rectangle
    startX: 550, // location in the canvas
    startY: 325,
    endX: 700,
    endY: 325,
    width: 300, // of the rectangle
    height: 200,
    horiz_pix_sec: 30,
    show_start_time: 0,
    motion_start_time: 2000,
    drawFunc() {
        context = jsPsych.currentTrial().context;
        var pos = 0;
        const gradLength = 100;
        const my_gradient  = context.createLinearGradient(400, 0, 600, 0);
        const bands = 10;
        const colors = ["#000", "#FFF"];
        const stops = bands * colors.length;
        while (pos <= stops) {
            my_gradient.addColorStop(pos / stops, colors[pos % colors.length]);
            pos++;
        }
        context.filter = 'contrast('+ CL1 +')';
        context.fillStyle = my_gradient;
        context.fillRect(500,325,gradLength,gradLength);
        context.stroke();
    }
};

//Instead I would like to just define the function once like this.

function drawFunc (x1, y1, x2, y2, CL1, x,y) {
    context = jsPsych.currentTrial().context;
    var pos = 0;
    const gradLength = 100;
    const my_gradient  = context.createLinearGradient(x1, y1, x2, y2);
    const bands = 10;
    const colors = ["#000", "#FFF"];
    const stops = bands * colors.length;
    while (pos <= stops) {
        my_gradient.addColorStop(pos / stops, colors[pos % colors.length]);
        pos++;
    }
    context.filter = 'contrast('+ CL1 +')';
    context.fillStyle = my_gradient;
    context.fillRect(x,y,gradLength,gradLength);
    context.stroke();
}

//And then call it later

var Left0 = {
    obj_type: 'manual', // means a rectangle
    startX: 550, // location in the canvas
    startY: 325,
    endX: 700,
    endY: 325,
    width: 300, // of the rectangle
    height: 200,
    horiz_pix_sec: 30,
    show_start_time: 0,
    motion_start_time: 2000,
    drawFunc: drawFunc(400, 0, 600, 0, 0.5, 500, 325)
} 

Please help resolve this issue.

Answer 1

You can wrap drawFunc(...) in an anonymous function:

var Left0 = {
    obj_type: 'manual', // means a rectangle
    startX: 550, // location in the canvas
    startY: 325,
    endX: 700,
    endY: 325,
    width: 300, // of the rectangle
    height: 200,
    horiz_pix_sec: 30,
    show_start_time: 0,
    motion_start_time: 2000,
    drawFunc: function(){
        drawFunc(400, 0, 600, 0, 0.5, 500, 325)
    }
}

This works because the drawFunc parameter is expecting a function. When you use drawFunc(...) without wrapping it in an anonymous function then the parameter is the return value of the function rather than the function itself.