Changing parameters on canvas

[melisa-akan]

Hello,

Using the 'canvas-keyboard-response' plugin, I would like to create new stimuli on each trial based on the parameters associated with each trial.

The stimulus is defined as a function (drawCircS).

var trial1 = {
    type: 'canvas-keyboard-response',
   canvas_size: [500, 1400],
    stimulus: drawCircS,
    choices: "NO_KEYS",
    trial_duration: 1000
}

My function draws a half circle with a radius that's defined by the variable "susrad".

function drawCircS(c){
	var ctx = c.getContext('2d');
	//suspect
	ctx.beginPath();
	ctx.arc(xCenterS, Ycenter, susrad, 1* (Math.PI),2* (Math.PI));
	ctx.lineTo(xCenterS - susrad, Ycenter);
	ctx.stroke();
	ctx.closePath();

}

What I would like to achieve is define susrad as a vector of radii, call this function at each trial and have the function use the next element in the susrad vector. I have tried multiple ways and they all failed.

Any help or guidance on where to start would be much appreciated. Thank you!

[jodeleeuw]

Hi @melisa-akan,

This sounds like a situation where timeline variables will work well.

You'll need to modify the drawCircS function to accept an additional argument for the susrad variable.

The third example listed here is almost exactly what you are trying to do: https://www.jspsych.org/7.1/plugins/canvas-button-response/#examples. The filledCirc function is similar to your drawCircS, but takes 3 arguments instead of 2. The list of trials is declared using the timeline_variables and the jsPsych.timelineVariable() function is used to get the right input for the function.

Feel free to follow up here if you need additional guidance!

[melisa-akan]

@jodeleeuw, that worked! Thank you so so much! Your response was very helpful. I really appreciate it!