Scope of document elements created in javascript

Question

I'm new to javascript and web development in general, and I'm trying to write a renderer that can draw each slice in a CT scan as a 2D image.

I have a long thin (512x49664) image made from 512x97 slices, each of which is just a 512x512 image. I've already ascertained that this will upset webgl, so I was planning to grab individual slices from the image by drawing it on a canvas and copying the image data into a texture.

My question is: if I have a function in which I do something like:

// Create a small canvas to contain a single slice.
function getSlice(sliceNumber){
    var sliceCanvas = document.createElement("canvas");
    sliceCanvas.width = 512;
    sliceCanvas.height = 512;
    var sliceContext = sliceCanvas.getContext('2d');
    sliceContext.drawImage(image, 0, 512*sliceNumber, 512, 512, 0, 0, 512, 512);
}

What happens to the canvas I created when the function exits?

you create your canvas element in getSlice(). so it will not be available/disposed after the function got executed. — Wolfgang
– Wolfgang, Commented Aug 2, 2016 at 9:10
FYI you've created an element but you've not put it in the DOM so it will not be rendered — Liam
– Liam, Commented Aug 2, 2016 at 9:15

Quentin · Accepted Answer · 2016-08-02 09:09:59Z

1

It hasn't been:

Added to the DOM
Stored in a variable or property that is still in scope
Returned anywhere

… there are no references remaining to it, so it will be marked for garbage collection.

answered Aug 2, 2016 at 9:09

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

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

Comments

Mario Santini · Accepted Answer · 2016-08-02 09:17:52Z

1

When you create a DOM element via javascript DOM API, you should attach this element to the page document.

Otherwise this element will never shown in your page.

So you have to add a line like this in your code:

document.body.appendChild(sliceCanvas);

If you call your function multiple times, you should check the canvas creation:

var sliceCanvas = document.getElementsByTagName('canvas')[0];

or

var sliceCanvas = document.getElementById('myCanvasId');

Then check:

if (!sliceCanvas) {
    sliceCanvas = document.createElement('canvas');
    sliceCanvas.id = 'myCanvasId'; // optional
    document.body.appendChild(sliceCanvas);
}

// here your code...

UPDATE:

Consider to change the document.body with the proper DOM element where you want to place your canvas.

edited Aug 2, 2016 at 9:17

answered Aug 2, 2016 at 9:13

Mario Santini

3,0112 gold badges22 silver badges30 bronze badges

Collectives™ on Stack Overflow

Scope of document elements created in javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related