Create an array of canvas elements

Question

I would like to create an array of canvas controls.

This is my code so far:

var j = new Array();
var canvas = new Array();
var ctx = new Array();
var d = new Array();

for (var i = 0; j < 16; i++) {
    j[i] = new JpegImage();
    canvas[i] = document.createElement("canvas" + i);
    ctx[i] = canvas[i].getContext("2d");
    d[i] = ctx[i].getImageData(0, 0, 180, 119);

    j[i].onload = function () {
        j[i].copyToImageData(dHidden1);
        ctx[i].putImageData(d[i], 0, 0);
        ctxHidden.drawImage(canvas[i], 0, 0, 180, 119);
    };
}

I get this error:

enter image description here

GameAlchemist · Accepted Answer · 2014-07-26 11:47:01Z

1

your code ends up calling for instance :

document.createElement('canvas0');

And canvas0 is not a valid html tag, so no canvas get created, so getContext cannot get called also.

In your loop, Simply use :

    canvas[i] = document.createElement("canvas");

answered Jul 26, 2014 at 11:47

GameAlchemist

19.3k7 gold badges38 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Create an array of canvas elements

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related