Canvas not appearing on Live Testing function or Preview

Hi Everyone!

I’m Paolo, and I’m a teacher in Sydney Australia. I"ve been trying to use Thunkable to teach some of my students how to code apps, however, they can’t see their Canvas component come up when they try to preview or live test their app. There simply appears a white space where the Canvas should be. Furthermore, I’ve noticed certain images also don’t show up in design mode for them either, e.g: the placeholder beaver sprite is simply invisible.

Thunkable is fully functional on my computer (Canvas works perfectly, all images show up), so I think it may have something to do with our education department’s firewall (it restricts some things for students, whereas teachers have no restrictions).

Is there any website that we need to whitelist to allow the Canvas component to show up? Or any ports we may need to unblock?

Please help! My students were so excited to see their apps working, but the absence of the Canvas feature has been really disappointing.

Regards,

Paolo

Hi,

Do I understand correctly that all students have Canvas and Image work well in Web Preview, but don’t work on Android Live? Or does Web Preview also not display canvas and images?

If something doesn’t work in Web Preview, you need to open the browser console (F12) and see what error occurs.

2 Likes

Web preview does not work either- so both Canvas and Sprites components aren’t showing up on Android Live and Web Preview.

You can see the Canvas component in the Design View, and you can see the indicator for the Sprites, although the indicator is surrounding a blank box (no image shows up, despite being uploaded to Sprite_type).

View the basic project with a canvas Thunkable

I see this screen in the preview window. How does the project on the link display on your students ’ computers? Instead of this canvas, a white screen? If so, what is output to the browser console?

As you can see there’s just a blank white screen for my students, whereas for me I can see the Canvas component just fine. I’ve also attached the console code, there’s nothing when I select the Canvas element on the student view. I can clearly see the Canvas HTML elements on the teacher view.

Unfortunately, you showed the Inspector screen with HTML markup, not the console. The console tab is located next to it and displays errors and warnings.

We’ve solved the issue, our firewall was blocking https://thunkable.github.io for our students, once it was unblocked they could access the Canvas component.

Thanks for your help!