How to draw multiple stimuli using the canvas-keyboard-response plugin?

[prashantig25]

Hi,
I want to draw two gabor patches using the canvas plugin. Here is the code for the two patches:

function rightgabor(c) {  
        var context = c.getContext("2d"); 
        const my_gradient = context.createLinearGradient(400,0,200,0);
        const bands = 10;
        const colors = ["#000", "#FFF"];
        const stops = bands * colors.length;
        var pos = 0;
        while (pos <= stops) {
            my_gradient.addColorStop(pos / stops, colors[pos % colors.length]);
            pos++;
        }
        context.fillStyle = my_gradient;
        context.filter = 'contrast(1)'
        context.fillRect(400,200,100,100);
        context.stroke()
    }'

function leftgabor(c) {  
        var context = c.getContext("2d"); 
        const my_gradient = context.createLinearGradient(0,0,200,0);
        const bands = 10;
        const colors = ["#000", "#FFF"];
        const stops = bands * colors.length;
        var pos = 0;
        while (pos <= stops) {
            my_gradient.addColorStop(pos / stops, colors[pos % colors.length]);
            pos++;
        }
        context.fillStyle = my_gradient;
        context.filter = 'contrast(0.5)'
        context.fillRect(0,200,100,100);
        context.stroke()
    }`

var trial1 = {
        type: 'canvas-keyboard-response',
        on_start: function(trial1){
            trial1.contrast = Math.random(); //trial1a.contrast1 = randbet(0.05,0.35)
        },
        stimulus: [rightgabor, leftgabor],
        choices: 'none',
        trial_duration: 5000,
        on_finish: function (data) {
            if (data.key_press === 37) {
                data.correct = true;
            } else {
                data.correct = false;
            }
        }
    };

However, both stimuli don't get displayed at the same time on the screen. When I call them individually, the stimuli is easily displayed. Please suggest any solutions.

[becky-gilbert]

Hi @prashantig25 , just FYI - I edited your comment to include three backticks at the start and end of the code block, to make the code easier to read (see how to do it here: #1113).

[prashantig25]

Thank you so much for editing it!

[becky-gilbert]

Hi @prashantig25, I think the canvas-* plugin stimulus parameter needs to be a function, whereas you have an array of functions. If you want to draw two stimuli on the canvas at the same time, then you'll just need to combine your two drawing functions into one. Your other option is to create your own modified version of the canvas-keyboard-response plugin so that it accepts multiple drawing functions for the same canvas, or creates multiple canvases on the page. Please feel free to follow up here f you need any further guidance.

[prashantig25]

I will try integrating it in one function! Thanks for the help.