How to display threejs output on temporary canvas?

Questions
1

I’m developing a web site with several different modes of display in one dedicated area. My problem is displaying a graphic using threejs functions. The following describes the basic plan and the problem.

Clicking on a tab labeled ‘Welcome’ generates (via the event listener) a drop down list of JPEG image titles. If user clicks on one, the list disappears and the corresponding image is displayed in a newly-generated canvas element using the context.drawImage() method.

If the user clicks on the ‘Tales’ tab, a list of text titles are displayed and a click on one causes an HTML iframe node to be created in the same

and the selected story in html form is displayed.

Clicking on the ‘Animations’ tab creates a canvas again but with two different results. The 2D figures are drawn using the Canvas functions described, for example, here:

I am trying to install a 3D test case using this example:

The example runs fine as a stand-alone function in a dedicated window. But here’s my problem: I can’t get it to run in the canvas element within the larger program. In my main HTML one

is redefined based on display choice and, if graphics, a canvas with id is created then passed to the JS function to complete the drawing. When invoking the threejs code I get no errors but no action either.

Part of the problem is my confusion over explicit use of the canvas value (see
https://threejsfundamentals.org/threejs/lessons/threejs-fundamentals.html) and implicit use via this:
document.body.appendChild( renderer.domElement );

However, in my attempt to use the example from threejsfundamentals.org I get exactly the same unresponsive result.

Thanks for reading this far.

2

Probable solution is to create stand-alone app (HTML + JS) and embed it in iframe. Good article on iframes is here:

Consider this topic closed.