Bug Report Browser Source Canvas Text Not Rendering


New Member

I'm trying to display an animation I created in HTML that uses some HTML5 features such as the canvas element. I am drawing planets orbiting stars and putting text on them. This works perfectly fine when I load them normally in both Firefox and Chrome but when I use the "Browser" source in a scene and load in my local file the HTML canvas won't render any text. See the following video to see a capture I took with OBS and no text rendering: https://streamable.com/1hm1jr Could anyone help me with this problem by either getting OBS to work or modifying the HTML/CSS/JS to work?

Here is all the HTML/CSS/JS put into one file: https://pastebin.com/aceugHcF
Here is a JSFiddle so that you can see the animation working successfully in your own browser (you might have to click "Run" if the file doesn't automatically load for you): https://jsfiddle.net/o8samzqw/

Here is the "Current Log File": https://obsproject.com/logs/ZKWcC1YxB0Jt5xG8
Here is the "Last Log File": https://obsproject.com/logs/mzlGg-YYcavmdRKD

Again, the problem is that when this HTML file is loaded as a local file in OBS it does not render text.

If you can help me with this I will thank you greatly.


New Member
Sorry for the necro, I found this topic from google and had the same problem as OP and solved it, so I'm posting my solution for posterity.
For me there was some error in the webpage code that prevented the canvas from loading properly in the browser source, even if it loaded properly in Firefox. I was able to find out what the error was by checking the logs (Help > Log Files > View Current Log). For me it was an image loading priority issue, but the problem may vary case by case.