javascript - 如何在 jspsych canvas-button-response 插件中调用复杂函数来绘制刺激？

Question

我对 jspsych（以及 javascript、html 和 css）非常陌生，我目前正在做一个在线实验。我有一个刺激图像（一个 png 文件），我想在每次试验中都保持不变，还有一些 js 代码在我的刺激图像上画了一个圆圈。但是，我无法让它在 jspsych canvas-button-response 插件中工作，我认为原因是我的画圈功能太有问题/复杂，或者我需要另一个插件，或者可能创建一个新插件, 使其工作。

这是 javascript 代码，它在我的刺激图像上绘制了我希望它绘制的内容：

container = document.createElement("div")
  image = document.createElement("img")
  circle = document.createElement("canvas")

  document.body.appendChild(container)
  container.appendChild(image)
  container.appendChild(circle)

  container.style.position = "relative";

  image.src = "alien-no-bubble-300.png";
  image.style.position = "absolute";
  image.style.top = 0;
  image.style.left = 0;
  circle.style.zIndex = 0;

  circle.height = 300;
  circle.width = 300;
  circle.style.height = image.style.height;
  circle.style.width = image.style.height;
  circle.style.position = "absolute";
  circle.style.top = 0;
  circle.style.left = 0;
  circle.style.zIndex = 10;
  context = circle.getContext('2d');

  context.beginPath();
  context.arc(150, 220, 50, 0, 2 * Math.PI, false);
  context.lineWidth = 5;
  context.strokeStyle = 'black';
  context.stroke();

它本身可以工作，但是当我试图将它放入一个函数中以在 canvas-button-response 插件中的画布上绘制时，它什么也没做。这是我最近的尝试：

function drawCircOnStim(circle, stim, color) {
        container = document.createElement("div")
        image = document.createElement("img")
        circle = document.createElement("canvas")

        document.body.appendChild(container)
        container.appendChild(image)
        container.appendChild(circle)

        container.style.position = "relative";

        image.src = stim;
        image.style.position = "absolute";
        image.style.top = 0;
        image.style.left = 0;
        circle.style.zIndex = 0;

        circle.height = 300;
        circle.width = 300;
        circle.style.height = image.style.height;
        circle.style.width = image.style.height;
        circle.style.position = "absolute";
        circle.style.top = 0;
        circle.style.left = 0;
        circle.style.zIndex = 10;
        context = circle.getContext('2d');

        context.beginPath();
        context.arc(150, 220, 50, 0, 2 * Math.PI, false);
        context.lineWidth = 5;
        context.strokeStyle = 'black';
        context.stroke();
        ctx.fillStyle = color;
    }

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

我在这里做错了什么？我应该使用另一个插件/创建不同的功能吗？任何帮助将不胜感激。

标签： javascripthtmlcanvasjspsych