Overflow (scroll) bars for Canvas-keyboard-response when canvas size is set to full screen size

[artembelopolsky]

Hi, I ran into an unexpected behavior of the canvas-keyboard-response plugin. I expected that one could specify canvas size as large as the screen size, but then you get these overflow bars and the canvas does not fit on the screen (see below):

var arrowheads = {
          type: jsPsychCanvasKeyboardResponse,
          canvas_size: [screen.height, screen.width],          
          stimulus: drawArrowHeadsOutward
                          
      }
      timeline.push(arrowheads);

If I decrease canvas size, it fits on the screen (see below).

 var arrowheads = {
          type: jsPsychCanvasKeyboardResponse,
          canvas_size: [screen.height-200, screen.width-150],          
          stimulus: drawArrowHeadsOutward
                          
      }
      timeline.push(arrowheads);

The reason seems to be embedding of the canvas element into another divider. I can see the reason for that, but it is unhandy for the cases where you want know the screen and not canvas coordinates of the drawn stimuli.

What would you recommend? Make a custom canvas plugin or modify this one? Have other people had the same issue? Thanks in advance

[jodeleeuw]

Hi @artembelopolsky,

Can you try adding this CSS rule to your document, after the import of jspsych.css, and see if it helps?

.jspsych-content { max-width: 100%; }

[artembelopolsky]

Hi @jodeleeuw,

Thanks for your quick reply. This helps to center the drawing, but it doesn't fix the overflow. I had to add this to the plugin code:

c.style.display = 'block';

This fixes the issue. I also saw this relevant thread here: #1536

I saw that you have already marked this for the next version. Should I just change this locally for the plugins I use?

[jodeleeuw]

Yes, I think a local change is the best option for now. Thanks for following up and providing the details for the fix!