An empty overlay canvas

Help & Support
1

Hi everyone I was checking why touch doesn’t work on mobile. I came across an empty canvas in the Layer chrome developer console. I delete the element (<canvas width="640" height="360" style="position: absolute; left: 0px; top: 0px;"></canvas>) and touch start working.
I am new to web development and come from unity, I was wonder how to track what cause to create this empty overlay canvas.

to mention I checked samples and there was no extra canvas except <canvas id="application-canvas" tabindex="0" class="fill-mode-FILL_WINDOW" width="929" height="922" style="width: 929px; height: 922px;"></canvas>

Update:
Found the script that creates the empty canvas and removes it from the project. but touch still doesn’t work again unlike before, by deleting the element.

It seems I should read all debug options in the chrome developer console but any guides will be appreciated.

2

Do you have a public project that reproduces the issue?

1 Like
3

No, Unfortunately, I solved the situation, fortunately :slight_smile:
But I am still wondering if it is possible to find the creator of an object in your engine or overall is there any debugger available to the web industry. I mean I couldn’t search for the object that had created this canvas mentioned in my question, I was forced to search all codes to find all objects that are creating canvas at any time in my javascript codes and sort them by execution time, then I found this preferred object (was part of someone else’s code that create its own canvas :zipper_mouth_face: ).

Shot
Shot1917×1012 140 KB

4

What do you mean? As in what created a DOM object? You can add breakpoints on DOM changes: javascript - Can I break with debugger on all changes to a DOM element? - Stack Overflow