How to draw a circle (in js) on top of a stimulus image?

[Alinaedr]

Hello,

I would like to create a stimulus image on the basis of a png image I have, but I need to draw a circle on top of this image (automatically in javascript), so that on each trial, the basis remains the same but the color of the circle changes.

So far, I tried to draw a circle using snapsvg library, but it doesn't draw it on top of my stimulus image, it draws it below the image. Here is my code (which is a wrong solution for the problem, but still):

var training_trial = { type: 'html-button-response', prompt: 'Click on the object the alien wants!', stimulus: function() { var stim = '<img src="stimuli_task/alien-no-bubble-300.png">'; if (jsPsych.timelineVariable('condition')=='word') { var s = Snap(100,100); var bigCircle = s.circle(200, 250, 50); var stim = '<img src="stimuli_task/alien-no-bubble-300.png">' + bigCircle; } return stim }, choices: jsPsych.timelineVariable('choices_baseline'), button_html: jsPsych.timelineVariable('button_html_baseline'), data: {condition: jsPsych.timelineVariable('condition')} }

Could somebody point me to a possible solution? I was thinking of using canvas to draw on top of the image (using my basis image as a canvas) but I haven't found a way to implement it. Any help would be greatly appreciated!

[becky-gilbert]

Hi @Alinaedr, I would use a canvas approach for this. You could use one of the canvas-* plugins, and in the stimulus function, draw the image and circle. See docs here for info on the drawImage function, and here's an example of drawing a circle. I think there are also some examples of drawing circles in the canvas-* plugin example HTML files. Hope this helps! Let us know if you need further guidance.

[Alinaedr]

Thanks a lot, it was really helpful! I managed to do this, but I have a little problem: although my function for drawing the image and a circle specifies the same image to draw, it doesn't appear on every trial (i.e., it draws only a circle on the first trial, and only on the second trial the image appears). I've tried to see where the problem is but I haven't found anything. Could you please have a look at my piece of code?

function drawCircOnStim(circle) {
            var context = circle.getContext('2d');

            var img = document.createElement("img");
            img.src = 'stimuli_task/alien-no-bubble-300.png';
            var x = (circle.width  - img.width ) * 0.5,
                y = (circle.height - img.height) * 0.5;
            context.drawImage(img, x, y);


            var xc = (circle.width) * 0.5,
                yc = (circle.height) * 0.5 + 150;
            context.beginPath();
            context.arc(xc, yc, 50, 0, 2 * Math.PI, false);
            context.lineWidth = 5;
            context.strokeStyle = 'black';
            context.stroke();
            context.fillStyle = "#" + ((1<<24)*Math.random() | 0).toString(16);
            context.fill();
        }

        var training_trial = {
            type: 'canvas-button-response',
            prompt: 'Click on the object the alien wants!',
            stimulus: function(c) {
                    drawCircOnStim(c)
            },
            choices: jsPsych.timelineVariable('choices_baseline'),
            button_html: jsPsych.timelineVariable('button_html_baseline'),
            data: {condition: jsPsych.timelineVariable('condition')}
        }

[becky-gilbert]

It sounds like the problem might be that the image file hasn't finished loading by the time the context.drawImage function is called. This function won't wait for the image to load - the image has to be available when it's called, otherwise it won't draw anything. Are you preloading the image? That's the first thing I would try.

If that doesn't fix it, then the next thing I would try is, in your drawCircOnStim function: (1) create the context and image element, (2) put everything except the img.src line in the image's onload function, and (3) after defining the onload function, set the image's source with img.src = 'stimuli_task/alien-no-bubble-300.png';. This page has more info about detecting when images have loaded.

[Alinaedr]

thanks a lot, I used the onload function and it worked!