What is the proper way to include a closing tag for the canvas in a Canvas rendered by Three.js

Question

What is the proper way to include a closing tag for the canvas in a Canvas rendered by Three.js

Why does three js always add canvas elements without a closing tag to the page? Is there a specific reason for this?

I'm interested in adding a closing tag to this canvas element.

This example page was inspected, revealing something similar to this image: https://i.sstatic.net/1UNyx.png

My reasoning for wanting this closing tag may seem trivial; I am attempting to retrieve the context using:

context = canvas.getContext('2d');

However, it returns null. After trying several solutions with no success, I stumbled upon this answer. This led me to suspect that the missing closing tag could be the issue.

In essence, my goal is to save the canvas as an image using this method.

javascript canvas three.js webgl

Answer 1

Answer №1

The answer that has been upvoted by @K3N is correct about one thing: the issue is not with the </canvas> closing tag missing in the inspector, but rather with attempting to obtain a 2D Context from a canvas where a webgl context was already initialized.

However,

While it's true that certain elements in HTML5 do not require a closing tag, such as some elements, for canvas

Tag omission in text/html:
Neither tag is omissible.

Here is an example disproving this notion using another fiddle. While <script> content should be executed immediately upon being encountered, and modern browsers make the canvas element available in the DOM before reaching the closing tag, enabling these browsers to execute the script, (although IE9 may not) this practice is generally discouraged :

canvas{border: 1px solid}

<canvas>
<p>I'm not there</p>

Therefore, despite what your inspector shows you, ~~or potentially internally within your browser~~, it is imperative that you include it in your markup.
(In fact, particularly with Chrome, only the inspector doesn't display it - you can view it by accessing the outerHTML property of the canvas element, where the closing tag will be visible.)

And now, onto the solution,

You are aiming to export the canvas as an image file.
To do so, since toBlob is a method of the HTMLCanvasElement, you do not require the current context. Simply follow the final steps outlined in the answer referenced in your question, with minor adjustments :

As elucidated in this particular answer given by gman, a webGL canvas operates on a double-buffer system, resulting in the drawing buffer being cleared promptly by the browser, unless the context was established utilizing the preserveDrawingBuffer: true argument in the getContext() method.
Nevertheless, implementing this argument can severely impact performance, hence why the preferred approach would involve executing the toBlob() method synchronously within the same rendering call.

Since the aforementioned details have been comprehensively explained, I shall refrain from further elaboration on this topic. However, do take note that this principle also pertains to methods like toDataURL() and

some2dCanvas.drawImage(yourWebglCanvas,x,y)

.

Answer 2

The answer that has been upvoted by @K3N is correct about one thing: the issue is not with the </canvas> closing tag missing in the inspector, but rather with attempting to obtain a 2D Context from a canvas where a webgl context was already initialized.

However,

While it's true that certain elements in HTML5 do not require a closing tag, such as some elements, for canvas

Tag omission in text/html:
Neither tag is omissible.

Here is an example disproving this notion using another fiddle. While <script> content should be executed immediately upon being encountered, and modern browsers make the canvas element available in the DOM before reaching the closing tag, enabling these browsers to execute the script, (although IE9 may not) this practice is generally discouraged :

canvas{border: 1px solid}

<canvas>
<p>I'm not there</p>

Therefore, despite what your inspector shows you, ~~or potentially internally within your browser~~, it is imperative that you include it in your markup.
(In fact, particularly with Chrome, only the inspector doesn't display it - you can view it by accessing the outerHTML property of the canvas element, where the closing tag will be visible.)

And now, onto the solution,

You are aiming to export the canvas as an image file.
To do so, since toBlob is a method of the HTMLCanvasElement, you do not require the current context. Simply follow the final steps outlined in the answer referenced in your question, with minor adjustments :

As elucidated in this particular answer given by gman, a webGL canvas operates on a double-buffer system, resulting in the drawing buffer being cleared promptly by the browser, unless the context was established utilizing the preserveDrawingBuffer: true argument in the getContext() method.
Nevertheless, implementing this argument can severely impact performance, hence why the preferred approach would involve executing the toBlob() method synchronously within the same rendering call.

Since the aforementioned details have been comprehensively explained, I shall refrain from further elaboration on this topic. However, do take note that this principle also pertains to methods like toDataURL() and

some2dCanvas.drawImage(yourWebglCanvas,x,y)

.

Answer 3

Answer №2

The issue you're currently facing is not with the canvas closing tag.

In Three.js, it utilizes a webgl context (whenever possible) with the canvas, making it impossible to obtain a 2d context. According to the specifications, if a context like webgl was obtained and 2d context is requested, it will:

Return null.

(Check out this jsfiddle)

https://i.sstatic.net/nYRSX.jpg

To tackle this, you'll need to create a new canvas (which doesn't have to be included in the DOM), and then acquire a 2D context from it. After that, use drawImage() on your 2D context by using the webgl canvas element as the image source into your new canvas. This way, you should be able to extract a bitmap/image from it.

Answer 4

The issue you're currently facing is not with the canvas closing tag.

In Three.js, it utilizes a webgl context (whenever possible) with the canvas, making it impossible to obtain a 2d context. According to the specifications, if a context like webgl was obtained and 2d context is requested, it will:

Return null.

(Check out this jsfiddle)

https://i.sstatic.net/nYRSX.jpg

To tackle this, you'll need to create a new canvas (which doesn't have to be included in the DOM), and then acquire a 2D context from it. After that, use drawImage() on your 2D context by using the webgl canvas element as the image source into your new canvas. This way, you should be able to extract a bitmap/image from it.

Answer 5

Answer №3

Recently, I've been working on a similar project.

Here are a few key points to consider:

The Elements tab in the browser might not always show closing tags correctly (I experienced this with a closed canvas appearing open).
In the example you mentioned, there is a broken tag rather than a missing one.
After some testing, it seems that obtaining a 2d context for a canvas already equipped with a webgl context, or vice versa, may lead to failure. However, getting a 2d context for a canvas with a 2d context works fine, and the same goes for webgl.

Consider these suggestions:

You could utilize getElementsByTagName('canvas'). If there's only one canvas, your problem is solved. Otherwise, search through the results for the specific canvas you need.

Alternatively, you can attempt something like this (adapted from How to Copy Contents of One Canvas to Another Canvas Locally):

//Appending the renderer to a div
div.appendChild(renderer.domElement);
div.id = "renderTarget";

// The first child element of div will be the canvas
var canvas = div.firstElementChild;

// Drawing the webgl canvas to a 2d canvas
var destCtx = document.getElementById("copy").getContext('2d');
destCtx.canvas.height = canvas.height;
destCtx.canvas.width = canvas.width;
destCtx.drawImage(canvas, 0, 0, canvas.width, canvas.height);

// Now you can manipulate the 2d canvas 'destCtx' as needed

Hope this helps!

Answer 6

Recently, I've been working on a similar project.

Here are a few key points to consider:

The Elements tab in the browser might not always show closing tags correctly (I experienced this with a closed canvas appearing open).
In the example you mentioned, there is a broken tag rather than a missing one.
After some testing, it seems that obtaining a 2d context for a canvas already equipped with a webgl context, or vice versa, may lead to failure. However, getting a 2d context for a canvas with a 2d context works fine, and the same goes for webgl.

Consider these suggestions:

You could utilize getElementsByTagName('canvas'). If there's only one canvas, your problem is solved. Otherwise, search through the results for the specific canvas you need.

Alternatively, you can attempt something like this (adapted from How to Copy Contents of One Canvas to Another Canvas Locally):

//Appending the renderer to a div
div.appendChild(renderer.domElement);
div.id = "renderTarget";

// The first child element of div will be the canvas
var canvas = div.firstElementChild;

// Drawing the webgl canvas to a 2d canvas
var destCtx = document.getElementById("copy").getContext('2d');
destCtx.canvas.height = canvas.height;
destCtx.canvas.width = canvas.width;
destCtx.drawImage(canvas, 0, 0, canvas.width, canvas.height);

// Now you can manipulate the 2d canvas 'destCtx' as needed

Hope this helps!

What is the proper way to include a closing tag for the canvas in a Canvas rendered by Three.js

Answer №1

However,

And now, onto the solution,

Answer №2

Answer №3

Similar questions

Decoding JSON in AngularJS

Guidelines on resolving the issue of Unsupported platform for [email protected]: requested {"os":"darwin","arch":"any"} (existing: {"os":"win32","arch":"x64"})

"Once the initial date has been selected, v-Calendar's datepicker allows for setting a

Extracting data from websites using Python's Selenium module, focusing on dynamic links generated through Javascript

The user type is not yet loaded from Firestore when the view is rendered

"Incorporating splice in a for loop is causing issues and not functioning

A step-by-step guide on importing a gltf model into Three.js

Identify modifications to properties in Angular

javascript box is hidden to prevent displaying of values

Output a variable that is generated from invoking an asynchronous function

The sendKeys() method in Protractor is failing due to the element being hidden/not

Unable to choose anything within a draggable modal window

What steps are involved in deploying a Vue.js application on a tomcat server?

Determining the percentage of a bar in d3.js when hovering over it

Access to JSON.stringify is prohibited

What is the best way to display a placeholder instead of the state's value when a page loads?

Creating a PDF file from a series of images

Can a package-lock.json file be created without running an npm install command?

How can I dynamically change a key in an object and replace it with a custom name while also updating its value?

Having trouble capturing a photo from webcam using HTML5 and getUserMedia() in Google Chrome upon initial page load