NOTICE: (improved versions of) these plugins were added to JsPsych in v6.2, please update your jsPsych if you wish to use them for your project.

Canvas plugins for jsPsych

Edits of the existing jspsych plugins html-keyboard-response and same-different-html which draw a canvas item and will draw on it using a provided function. based on the great work by Josh de Leeuw

Installation

Copy the required files into the same folder as the jsPsych study's HTML file and source them like any other jsPsych plugin.

<script src="jspsych-canvas-keyboard-response.js"></script>
<script src="jspsych-same-different-canvas.js"></script>

Usage

These plugins match the plugins they are based on as much as possible; the biggest difference is that instead of a stimulus/stimuli, they require drawing(s), which are functions that act on a canvas item c. note that the function will still generally need to set the correct context itself, using a line like let ctx = c.getContext("2d").

Example

We can draw many things on a canvas. Below is a function that draws a rectangle, for example:

function draw_rect(c) {
	let ctx = c.getContext("2d");
	ctx.fillRect(25, 25, 100, 100);
	}

We can now use this function in an instance of our plugin:

let timeline = [];

let mytrial = {
	type:"canvas-keyboard-response",
	drawing: draw_rect,
	prompt: "is this a triangle?",
	}

timeline.push(mytrial)

same-different-canvas works similarly, but requires an array of two functions acting on c:

let difftrial = {
	type: "same-different-canvas",
	drawings: [draw_rect, draw_circ],
	interval_disp: "<p style="font-size: 48px;">+</p>",
	same_key: "A",
	different_key: "L",
	gap_duration: 750,
	}

timeline.push(difftrial)

Questions

You can contact me for any questions via my Twitter