Is it possible to put a canvas inside a screen?

I Need Help
1

Hi All,

I’ve been hovering around purchasing blocks for over one year - I see version 3.0 adds a lot… If I can do the following - I’m converted :wink:

What I want to achieve is this:
https://psitsour.com/3dcointoss/

Note how the video stays within the iPhone screen? I need the same kind of functionality for a canvas element which contains a game written in Javascript. Note the responsiveness in the example above…

Also - the initialisation for the game involves a bunch of javascript. Is it possible to add script sections within Blocs? Is it possible to call scripts from OnClick events?

Thanks in advance!

2

Hi @Richo,

So is the provided sample site your current site?

Blocs does offer a few Brics for adding devices. But the Blocs structure is not the same as the site example you provided. The sample site uses an animated GIF (not video) as a “background-image”.

You can see the site structure for the site you linked to here:

sample-site-gif-background
sample-site-gif-background1321×214 50.6 KB

Blocs does its device Brics a little different I believe, and uses a “img src”. You can see about the device bric feature and its options here: Devices – Blocs – User Documents

But since you are already using canvas for your game, can’t you instead load up your desired mockup image using the image loading capabilities of canvas as part of your initialization? That way its all inclusive and you have full manipulative control. You can also render mockups entirely with CSS, doing this would again give the ability for further manipulative control.

Regarding the entry points you will need for implementing your source structure into Blocs have a look at the following documentation.

  1. Classes & ID’s – Custom Classes Basics – Blocs – User Documents
  2. HTML Bric – Code Widget – Blocs – User Documents
  3. Page Setting - Add Code – Page Settings – Blocs – User Documents
  4. Page Attachments – Page Attachments – Blocs – User Documents
  5. Custom Data Attributes – https://help.blocsapp.com/knowledge-base/custom-data-attributes/

With those links you should be able to manually implement all of what you need through various approaches. Hopefully that offers you some starting points to see how things would be possible with Blocs.

1 Like