Can I create a canvas dynamically?

[sophief10]

Hi everyone!

I am trying to run an experiment that uses the HTML 5 canvas for two trials. The tricky bit is that the regions of the canvas on which I draw my stimuli need to be randomized for each participant, so I must create/style the canvas dynamically. What I want to do is have a set of 16 mini-canvases and then randomly select 5 while the experiment is running.

My current approach is to run the experiment inside a div element (id = "experiment"), create a series of canvases during the experiment using document.createElement('canvas'), and then append each canvas to the div element. For example:

var test1 = function() {
          canvas = document.createElement('canvas');
          return canvas;
      };

      var test2 = function() {
          canvas.id="canvas";
          canvas.width=1224;
          canvas.height=768;
          canvas.style.border = "1px solid";
          canvas.style.borderColor = "white";
          document.getElementById("experiment").appendChild('canvas');
      };

      var test3= {
          type: 'call-function',
          func: test1
      };
      finalTimeline.push(test3);

      var test4 = {
          type: 'call-function',
          func: test2
      };
      finalTimeline.push(test4);

Unfortunately, when I try to run the above code, I get the following message in my debugger console: Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

Does anyone know what I am doing wrong?

[sophief10]

UPDATE: I tried to modify the canvas-keyboard-response plugin like so:
test.txt

Then, I tried to use the modified plugin in the following trial:

var trial = {
            type: 'test',
            shape1: function(location1) {
                console.log(location1);
                let ctx = location1.getContext("2d");
                shapes[0]();
            },
            shape2: function(location2) {
                let ctx = location2.getContext("2d");
                shapes[1]();
            },
            shape3: function(location3) {
                let ctx = location3.getContext("2d");
                shapes[2]();
            },
            shape4: function(location4) {
                let ctx = location4.getContext("2d");
                shapes[3]();
            },
            shape5: function(location5) {
                let ctx = location5.getContext("2d");
                shapes[4]();
            }
        };
        finalTimeline.push(trial);

(Each shape[i] element represents a predefined function.)

Unfortunately, triggering the console.log(location1) function yields "null," not the canvas object I want it to yield.

Is there a way I can fix this?