-
Notifications
You must be signed in to change notification settings - Fork 1.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Render canvas object #1249
Comments
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 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. |
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 |
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 |
I think the first way should work, i was able to render canvas using the 'afterRender' event, thankss |
Canvases are re-drawn from scratch per frame, so you can draw the curved line with changes from frame to frame. Your 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. |
I'm trying to render text with canvas, but it doesn't appear on the screen
I used a console.log to see the value of
ctx
and it returns the context normallyThe text was updated successfully, but these errors were encountered: