Trouble using canvas with jsPsych to present images

418 views
Skip to first unread message

rit...@gmail.com

unread,
Jul 4, 2018, 4:44:14 PM7/4/18
to jsPsych
Hello!

I want to use a canvas to present some pngs I have as my stimuli, since I want to manipulate the color of specific pixels based on the participants' actions.

For example, for the sake of a simple explanation, let's say I'm using the canvas just to present a red rectangle on a black background (rather than a png image):

The following script works (without using jsPsych):
---------------------
<html>

NOTE - (leaving out the paths here, but sourcing all the relevant plug ins)
<canvas id="myCanvas" width="200" height="100"></canvas>
<link rel="stylesheet" href="/Users/victoria/Documents/jsPsych-master/css/jspsych.css">

<style>
body {
background-color: rgba(0, 0, 0, 1) ;
color: white;
}

</style>
<script>
var showColorRect = function() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
}
showColorRect()
</script>
</html>
---------------------
This code WORKS. A red rectangle is displayed over a black background.

However, if I replace the javascript section of code with the following, it no longer works. All I've done is I've deleted the call of "showColorRect()" and replaced it with a trial of type "call-function" where the function is showColorRect.
---------------------
<script>
var showColorRect = function() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
}

var trial = {
type: 'call-function',
func: showColorRect,
};

var timeline = [trial];
jsPsych.init({
timeline: timeline
});
</script>
---------------------
This gives an error for the line "var ctx = canvas.getContext("2d");" : Uncaught TypeError: Cannot read property 'getContext' of null.

Which seems odd to me since that line caused no problem in the first example of code above, without jsPsych.

I've also tried this using html-keyboard-response instead of call-function, where the stimulus is a call to the showColorRect function, but this doesn't work either (I assume because the stimulus should be html code, which the function I need is not)

Thank you for your help!

Josh de Leeuw

unread,
Jul 16, 2018, 4:03:00 PM7/16/18
to rit...@gmail.com, jsPsych
I think this is happening because the <canvas> element is in the part of the HTML document that jsPsych controls (the display_element parameter in jsPsych.init). That means that it gets overwritten by whatever the individual trials are doing. Most trials clear the display at the end of the trial.

A workaround could be to add the canvas element as the stimulus of an html-keyboard-response trial and then put the code to generate the stimulus inside the on_load function of that trial.


That should ensure that the canvas is on the screen when the functions to draw are called.

Ultimately, this thread is a reminder that we need a plugin to support canvas.

--
You received this message because you are subscribed to the Google Groups "jsPsych" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jspsych+u...@googlegroups.com.
To post to this group, send email to jsp...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/jspsych/f58bb24b-f454-42da-8eb9-5ff52f69acaf%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Reply all
Reply to author
Forward
0 new messages