Canvas with a transparent background, why am i getting this error? Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'

Question

I have a canvas in HTML and I am trying to put a transparent background so I can layer other elements under it. This is the advised code to enable a transparent background on a canvas.

const canvas = document.getElementsByTagName('canvas');
document.body.appendChild(canvas);
const ctx = canvas.getContext("2d");

<canvas style="width: 1500px; height: 800px;"></canvas>

Error message: Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

Does this answer your question? [Why does the canvas have a black background?](https://stackoverflow.com/questions/71645601/why-does-the-canvas-have-a-black-background) — Archit Gargi, Jun 02 '22 at 13:05
@ArchitGargi this does not answer the question, which answer specifically do you feel would solve this issue? — Diced Mango, Jun 02 '22 at 13:12

heyitsmarcucu · Answer 1 · 2022-06-02T13:30:11.780

0

I believe that you are getting the error/exception due to the fact that getElementsByTagName returns a list instead of a single element.

I would propose/recommend using getElementById

A sample would be something like this:

HTML:

<canvas id='canvas' width='600' height='300'>
</canvas>

JS:

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext("2d");

edited Jun 02 '22 at 13:30

answered Jun 02 '22 at 13:24

heyitsmarcucu

612
5
9

thank you for the suggestion, I now have a new error: Cannot access 'ctx' before initialization – Diced Mango Jun 02 '22 at 13:44
Are you using the ctx variable before it was declared? That error would return if it was the case – heyitsmarcucu Jun 02 '22 at 13:46
I have added the ID in a different JS file, do I need to make sure this is added after the canvas is created? $('canvas').attr('id', 'canvas'); – Diced Mango Jun 02 '22 at 14:06
If you followed my example, you don’t necessarily have to do that. Because the canvas itself within the HTML canvas tag already has the canvas ID – heyitsmarcucu Jun 02 '22 at 14:08
the canvas is being created with WEBGL, so I will need to use js to add the class. – Diced Mango Jun 02 '22 at 14:35

Canvas with a transparent background, why am i getting this error? Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'

1 Answers1