strange tear lines when adding dots to on top of squares in keyboard-canvas-response #1953

Max-Lovell · 2021-06-30T14:58:42Z

Max-Lovell
Jun 30, 2021

can anyone elaborate as to why this happens?

<html>
    <head>
        <title>Experimental task</title>
        <script src="jspsych-6.3.1/jspsych.js"></script>
        <script src="jspsych-6.3.1/plugins/jspsych-canvas-keyboard-response.js"></script>
        <link href="jspsych-6.3.1/css/jspsych.css" rel="stylesheet" type="text/css"></link>
        <link href="style.css" rel="stylesheet"></link>
    </head>
    <body>
    </body>
    <script>

    var timeline = [];
   var squareWidth = 250;

function drawStim(c){
    var ctx = c.getContext('2d')
    var l_x = 75
    var r_x = 475
    var co_y = 145
    ctx.fillRect(l_x, co_y, squareWidth, squareWidth);
    ctx.fillRect(r_x, co_y, squareWidth, squareWidth);

    var cellSize = 10;
    var arr = [...Array(625).keys()];
    var dotIndex = jsPsych.randomization.shuffle(arr);

    var mat_no = 0;
     for (var x = l_x ; x < l_x + squareWidth; x += cellSize){
         for (var y = co_y ; y < co_y + squareWidth; y += cellSize){
             if (dotIndex[mat_no] < (312 + 70)){
                 ctx.arc(x + (cellSize/2) , y + (cellSize/2), 2, 0, Math.PI*2);
                 ctx.fillStyle = "white";
                 ctx.fill();
             }
     mat_no++;
     }
}}

    var trial = {
        type: 'canvas-keyboard-response',
        canvas_size: [540, 800],
        stimulus: drawStim,
        choices: ['e','i'],
        prompt: `<p style="position:relative; top:150px; font-size:28px">right or left?</p>`,
        data: {shape: 'rectangle'}
    };

    timeline.push(trial);

    jsPsych.init({
      timeline: timeline
    });
    </script>
</html>

CSS file (can be removed):

#jspsych-canvas-stimulus {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
}

#jspsych-content.text {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
}

Answered by becky-gilbert

Jun 30, 2021

I think what's happening is that each drawing path is always starting from the last x/y coordinate, then moving to the x/y coordinate given in ctx.arc, then drawing the circle and filling it in. This works fine in the first row of dots because the x value is the same and the y value keeps moving down, so the drawing path never creates a fillable shape other than the dot. But when the x value increases to the next row and the y value goes back down, the drawing path crosses itself, and then ctx.fill() fills in everything in the joined shape.

Anyway the fix is easy: just try adding ctx.beginPath(); right before the ctx.arc line to re-start the drawing path each time.

View full answer

becky-gilbert · 2021-06-30T20:24:33Z

becky-gilbert
Jun 30, 2021
Maintainer

I think what's happening is that each drawing path is always starting from the last x/y coordinate, then moving to the x/y coordinate given in ctx.arc, then drawing the circle and filling it in. This works fine in the first row of dots because the x value is the same and the y value keeps moving down, so the drawing path never creates a fillable shape other than the dot. But when the x value increases to the next row and the y value goes back down, the drawing path crosses itself, and then ctx.fill() fills in everything in the joined shape.

Anyway the fix is easy: just try adding ctx.beginPath(); right before the ctx.arc line to re-start the drawing path each time.

2 replies

becky-gilbert Jun 30, 2021
Maintainer

By the way, in case you're curious, I figured this out by drawing just a small subset of dots and printing out the coordinates, and then increasing the number of dots and looking to see when the tear lines started occurring.

Max-Lovell Jul 1, 2021
Author

perfect! thanks very much for the explanation, fix and debugging tip becky!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

strange tear lines when adding dots to on top of squares in keyboard-canvas-response #1953

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment 2 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

strange tear lines when adding dots to on top of squares in keyboard-canvas-response #1953

Uh oh!

Uh oh!

Max-Lovell Jun 30, 2021

Replies: 1 comment · 2 replies

Uh oh!

becky-gilbert Jun 30, 2021 Maintainer

Uh oh!

becky-gilbert Jun 30, 2021 Maintainer

Uh oh!

Max-Lovell Jul 1, 2021 Author

Max-Lovell
Jun 30, 2021

Replies: 1 comment 2 replies

becky-gilbert
Jun 30, 2021
Maintainer

becky-gilbert Jun 30, 2021
Maintainer

Max-Lovell Jul 1, 2021
Author