The contrast level of the gabor patches generated using the canvas-keyboard-plugin does not change.

[prashantig25]

Hi! I am drawing two Gabor patches on the canvas and presenting it using the canvas-keyboard-plugin.

function gabor(c) {  //x1, y1, x2, y2 are the coordinates for the start and end of the gradient.
        var context = c.getContext("2d"); // x, y are the position of the gabor on the screen. Con is the contrast level
        const my_gradient = context.createLinearGradient(0,0,200,0);
        const my_gradient1 = context.createLinearGradient(225,0,425,0);
        const bands = 10;
        const colors = ["#000", "#FFF"];
        const stops = bands * colors.length;
        var pos = 0;
        while (pos <= stops) {
            my_gradient1.addColorStop(pos / stops, colors[pos % colors.length]);
            pos++;
        }
        var pos1 = 0;
        while (pos1 <= stops) {
            my_gradient.addColorStop(pos1 / stops, colors[pos1 % colors.length]);
            pos1++;
        }
        context.fillStyle = my_gradient;
        context.filter = 'contrast('+ jsPsych.currentTrial().contrast +')'
        context.fillRect(100,200,100,100);
        context.fillStyle = my_gradient1;
        context.filter = 'contrast('+ jsPsych.currentTrial().contrast1 +')'
        context.fillRect(325,200,100,100);
        context.stroke()
        context.moveTo(240, 250); //horizontal line
        context.lineTo(280, 250);
        context.moveTo(260, 230); //vertical line
        context.lineTo(260, 270);
        context.filter = 'contrast(1)';
        context.lineWidth = 3;
        context.stroke();
    }

var trial1 = {
        type: 'canvas-keyboard-response',
        on_start: function(trial1){
            trial1.contrast = Math.random(); trial1.contrast1 = jsPsych.currentTrial().contrast+ randbet(0.05,0.35);
        },
        stimulus: function(c) {
            gabor(c);
        },
        choices: [37,39],
        trial_duration: 3000,
        on_finish: function (data) {
            if (data.key_press === 37) {
                data.correct = true;
            } else {
                data.correct = false;
            }
        }
    };

I want to change the contrast level of the Gabor patches on every trial. I do that changing the contrast level using the on_start function. The contrast levels change when I run the code on a few devices but the contrast levels remain unchanged on a Macintosh desktop. Additionally, when I run the code on this desktop where the contrast levels are preset to a certain constant, the contrast levels still don't change.
Is there a particular cause for it or could it be related to the particular device? Any help is appreciated. Thank you!

[jodeleeuw]

Hi @prashantig25,

Can you explain what you are trying to do here:

on_start: function(trial1){
	trial1.contrast = Math.random(); trial1.contrast1 = jsPsych.currentTrial().contrast+ randbet(0.05,0.35);
},

It looks like you are assigning Math.random() to `.contrast, but then immediately overriding that. How about:

on_start: function(trial1){
	trial1.contrast = Math.random()+ randbet(0.05,0.35);
},

Does that accomplish what you are looking for?

I don't think this fully solves the issue, but I'm trying to better understand your intention before digging into the rest of the code.

[prashantig25]

So here I am generating two contrast levels. One for a gabor on the left hand side of the screen and the other one for the gabor on the right side. trial1.contrast is the contrast level for the left gabor and trial1.contrast1 is the contrast level for the right gabor. I want the right gabor to have a contrast level that is greater than the left gabor.

on_start: function(trial1){
	trial1.contrast = `Math.random();` trial1.contrast1 = jsPsych.currentTrial().contrast+ randbet(0.05,0.35);
},

I hope that clarifies my idea.

on_start: function(trial1){
	trial1.contrast = Math.random()+ randbet(0.05,0.35);
},

This will only generate one contrast level and that is not enough as I have two patches.

[jodeleeuw]

Got it. Sorry I missed that .contrast and .contrast1 were different variables!

[jodeleeuw]

When you run on a Mac Desktop are you using Safari? Have you tried other browsers on the Mac Desktop? Do they all not work?

[prashantig25]

I tried it using Firefox and Chrome. Does not seem to work in either of them.

[jodeleeuw]

What devices does it work on?

[prashantig25]

It currently works on a few Windows 10 laptops and desktops across both Chrome and Firefox.