solved how to programatically create multiple canvases?

[Aerion]

Hi guys. How do I use javascript to create multiple canvases so that I can create 9 different scenes all running at the same time?

[Sebavan]

Like any others dom elements:

var canvas = document.createElement("canvas");
document.children[0].appendChild(canvas);

And then use it as usual. Be simply careful cause the number of contexts you can create is limited.

[Aerion]

var canv = document.createElement ( 'canv1' );

document.children [ 0 ].appendChild ( canv );

alert ( document.getElementById ( 'canv1' ) );

Uncaught TypeError: Cannot read property 'getContext' of null

Why am I receiving this error? I just wanna create multiple canvases...

[RaananW]

You can read about createElement in MDN (for example): https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

the 1st variable should be a tag name (canvas) and not an id or a name. MDN is your friend, search there and you will see that you can find answers to all of your JS questions.

[Aerion]

@RaananW

ok : 

var canv = document.createElement ( 'canvas' );

document.children [ 0 ].appendChild ( canv );

this works but why is it showing a white screen when all my files are loading correctly?

[JohnK]

5 hours ago, Mythros said:

@RaananW

ok : 

var canv = document.createElement ( 'canvas' );

document.children [ 0 ].appendChild ( canv );

this works but why is it showing a white screen when all my files are loading correctly?

Sorry but this question is so void of detail it is unanswerable even by Derren Brown (English Mindreader).

[Aerion]

@JohnK No it doesn't. I simply asked why the screen is appearing right when everything has loaded correctly? do I need to specify a width & height or something to get the programatic canvas to show up?

[Aerion]

Here's the code: 

http://babylontesting.epizy.com/

[adam]

Use the console Mythros.

[Aerion]

i did...

[adam]

How did you use it?

[Aerion]

i used it to fix the issue i had where i had accidently put document.createElement ( 'canv1' ) instead of document.createElement ( 'canvas' )

[adam]

now use it to fix this:

Uncaught ReferenceError: canvas is not defined
    at main.php:216

You need to start helping yourself.

[Aerion]

i must be having a cache error because that's not showing up in my console...

[Aerion]

did i fix the problem?

[RaananW]

Are you asking us if you solved your own problem?

[Aerion]

no.. i'm asking if i fixed the problem. i'm having an obvious cache problem. i cleared the cache & i'm still not seeing line 216 being undefined.

[Pryme8]

for(var i=0; i < 10;  i++){
var cvas = document.createElement('canvas');
cvas.setAttribute('id', 'renderCanvas'+i);
cvas.classList.add('canvas-thingy');
var target = document.body || what ever...
target.appendChild(cvas);

}


Errors on your page:
3infinityfree.net/errors/404 Failed to load resource: the server responded with a status of 404 ()
main.php:1 Failed to load https://infinityfree.net/errors/404: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://babylontesting.epizy.com' is therefore not allowed access. The response had HTTP status code 404.
2infinityfree.net/errors/404:1 GET https://infinityfree.net/errors/404 404 ()
main.php:1 Failed to load https://infinityfree.net/errors/404: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://babylontesting.epizy.com' is therefore not allowed access. The response had HTTP status code 404.

 

[Aerion]

thank you @Pryme8 it's working perfectly now! <3 Problem solved!