render_on_canvas

[einGlasRotwein]

Hey everyone,

I know the feature is really new, but I was struggling to get it to work because there aren't any examples yet. How can I present images when render_on_canvas is true? If I use the image path as stimulus and render_on_canvas is true, it doesn't show anything, just a white screen. What is the expected input if render_on_canvas is true? The image is displayed correctly if render_on_canvas is false.

Thanks in advance :-)
Juli

[jodeleeuw]

Hi Juli,

This might be an edge case that we didn't catch in our testing. Can you post an example and the kind of images that you are using?

[einGlasRotwein]

It happens with all my images in all my projects so far, so it's likely I got something wrong.
I have a little toy example I did the other day, which can be found in this repo. Sorry, the experimental descriptions are in German, but that doesn't matter for the example.
If I set render_on_canvas: true in the show_picture trial, the images are not shown.

EDIT: (Right now, render_on_canvas is set to false, so everything works as expected.)

[becky-gilbert]

Hi @einGlasRotwein, thanks for reporting this and sharing your code - very helpful!

When I ran your experiment, I noticed that the image didn't load right away, which is because you're using timelineVariables for the image stimulus and the images aren't preloaded manually. I edited your code to manually preload the images, and now it works with render_on_canvas: true:

var picture_array = []; // for preloading

for (let i = 0; i < nTrials ; i ++) { // loop through picture numbers
    pictures.push({ image : `${imgPath}${i}.jpg` }); // push to timeline variable array
    picture_array.push(`${imgPath}${i}.jpg`);
}
// ...
jsPsych.init({
  timeline: timeline,
  preload_images: picture_array,
  on_finish: function() {
      jsPsych.data.displayData();
  }
});

Can you check that this works on your end too?

So I think this means that the render_on_canvas: true setting doesn't work when the images aren't preloaded. I've opened an issue to track this and see if we can fix it: #1305. Thanks again for reporting!

[einGlasRotwein]

Thank you so much, this works perfectly fine!