Possibility to append the canvas to a custom element

[csarnataro]

Hello, thank you for this awesome library, I really like it.

I've used it in a demo a few weeks ago (source code)

Basically, I built a toy voting machine with an Arduino connected to the Internet. Then I showed the results of the votes in a boxing-match-like game. The fight was JS vs TS 😄

The game had to be displayed in a specific component in an Electron app. For this reason, instead of appending the canvas to the document.body, I needed to append it to a specific element in the DOM, so I patched my local version of the library to achieve this.

But if you think this feature can be interesting for other people, I can create a PR in the next few days.

My idea was to add an entry in the config file, like:

export const CONFIG = {
  CONTAINER_ID = 'my-container',
  [...]

and then update internal/main.js like this:

  const containerId = CONFIG.CONTAINER_ID
  const container = document.getElementById(containerId) || document.body
  container.appendChild(realCanvas);

What do you think?

[btco]

Ah yes, this is a great idea! I tried to do it but it was tricky because of the sizing logic, but if you have a PR that makes this work, I'd love to see it!

[csarnataro]

I haven't thought specifically about the sizing logic, actually. What I did in my demo was to use simple CSS to give the desired width and height. Is there something specific to that logic I should care of, in your opinion?

[csarnataro]

I think this issue is duplicate of https://github.com/btco/qx82/issues/4 right? When I created #9 I didn't notice there was another issue regarding using a custom element, sorry. Should we close this one maybe?

[btco]

True, it's a duplicate of #4! Will close it.

[btco]

Duplicate of #4

[btco]

There is now also a way to specify:

• What element the canvas should be added to (CONFIG.CANVAS_SETTINGS.CONTAINER)
• Whether or not QX82 should auto-position and/or auto-size the canvas (CONFIG.CANVAS_SETTINGS.AUTO_POSITION and AUTO_SIZE)
• What ID and CSS classes to assign to the canvas (CONFIG.CANVAS_SETTINGS.CANVAS_ID and CANVAS_CLASSES).