Render canvas object

[hlxdev]

I'm trying to render text with canvas, but it doesn't appear on the screen

useEffect(() => {
    const cw = 500
    const ch = 500

    const render = Render.create({
      element: boxRef.current!,
      canvas: canvasRef.current!,
      engine: engine.current,
      options: { width: cw, height: ch, wireframes: false },
    });

    renderRef.current = render

    Runner.run(engine.current)
    Render.run(render)

    const ctx = renderRef.current!.context

    ctx.font = '48px Arial'
    ctx.fillStyle = '#fff'
    ctx.fillText('OBS', 50, 50)

    return () => {
      Render.stop(render)
      World.clear(engine.current.world, false)
      Engine.clear(engine.current)
    };
  }, [])

I used a console.log to see the value of ctx and it returns the context normally

[ggorlen]

See Matter.js: placing text or images on the canvas behind objects for an example of drawing text on top of the canvas using the afterRender event, after Matter's renderer has drawn on it.

if you want to do complex drawing, probably don't use the prototyping renderer built into MJS and run MJS headlessly with your own canvas front-end (or maybe even non-canvas DOM elements, if you're working with text). Knowing more about your use case would make it easier to make a recommendation.

[hlxdev]

Knowing more about your use case would make it easier to make a recommendation.

actually, i would need to draw a trajectory line from a circle (a projectile that is fired using applyForce when a button is clicked) to the point it can reach
i thought the best way to do this would be with the canvas, as i didn't find a native way in MJS to create curved lines

[ggorlen]

Thanks for the context. If you don't mind the trajectory line being on top of the drawing MJS has already rendered on the canvas on each frame, then you may be able to get away with afterRender (first link above). Otherwise, your use case is probably stretching MJS's prototyping renderer beyond its capabilities, and it'd be better to use your own rendering front-end (second link above). Does one of these approaches meet your needs?

[hlxdev]

I think the first way should work, i was able to render canvas using the 'afterRender' event, thankss
Just one question, with this approach can I change this curved line (like the angle or length) according to the value of a react state, for example? or can it only be rendered once?

[ggorlen]

Canvases are re-drawn from scratch per frame, so you can draw the curved line with changes from frame to frame. Your afterRender event callback should run on every frame, so if you're drawing the curve at a particular X/Y position and you increment the X position by some small amount every frame, it'll appear to move rightward across the screen.

React can be used to manage the canvas, entity state and MJS library objects, but the underlying MJS and canvas logic is unrelated to React. Technically, anything you can do normally in MJS can also be done in React. In practice, though, React can introduce its own gotchas into your code and make certain things a bit harder than just doing it directly in vanilla JS with MJS.

Feel free to close the issue if/once you feel it's resolved satisfactorily.