[Question] Woscope integration

[joex92]

Describe your question How can I manage the Woscope library visualization in a Two.js webgl canvas? by manage I mean like, adding more things in the canvas and the woscope is just one more item in the canvas. It apparently needs the canvas element.

Your code (either pasted here, or a link to a hosted example) I tried to create my own XY oscilloscope with just Two.js (SVG canvas) and Tone.js

Screenshots there's a live demo of the Woscope functionality.

Environment (please select one):

• [X] Code executes in browser (e.g: using script tag to load library)
• [ ] Packaged software (e.g: ES6 imports, react, angular, vue.js)
• [ ] Running headless (usually Node.js)

[jonobr1]

I'm not familiar with Woscope, but you can always get the canvas element through the domElement property of Two.js's renderers like so:

const two = new Two({ type: Two.Types.webgl }):
const canvas = two.renderer.domElement;

Since, Woscope is using a canvas, you need to set the appropriate type. Alternatively, like Woscope, you could make a <canvas /> element and pass it in to Two.js like so:

const canvas = document.getElementById('my-canvas');
const two = new Two({
  type: Two.Types.webgl,
  domElement: canvas
});

[joex92]

ok, but would I be able to add things managed by Two.js to the canvas? for example, add a frame to the osciloscope and change its size?

[jonobr1]

I don't know how Woscope works, so I can't give you an answer to that. If you want to keep Woscope's content and Two.js content, then you'll want to enable overdraw: https://two.js.org/docs/renderers/webgl/#overdraw

Like so:

const two = new Two({
  type: Two.Types.webgl,
  overdraw: true
});

This will disable Two.js from clearing all content on the canvas every frame before it starts its own rendering.