search

jonobr1 / two.js

A renderer agnostic two-dimensional drawing api for the web.
https://two.js.org
MIT License
8.31k stars 455 forks source link

Help/Show me how to render in SVG, Canvas, and WebGL #577

Closed MichaelKatiba closed 2 years ago

MichaelKatiba commented 2 years ago

Sorry if this has been asked before, I searched and did find any solution. Hey everyone, I am kinda newbie to two.js, and I was wondering if anyone show me the 3 ways of how to render my simple drawing so that it is saved as an SVG, Image and any WebGL format. I know the basics of JavaScript, so it will be helpful if the solution can be in vanilla JS. Tried reading Docs but couldn't make it work.

I want to be able to save the different file types each time a user clicks the “Download” button.

Here is my code, check it out on/ fork it here on codepen and share the link to your solution.

I just want to get a clear idea on how it works and how to go about it. Thanks in advance.

jonobr1 commented 2 years ago

Of course, thanks for asking!

This is how to save an image if your canvas type is Two.Types.canvas or Two.Types.webgl: https://codepen.io/jonobr1/pen/ZEXeorK

This is how to save an SVG if your type is Two.Types.svg (this is the default mode): https://codepen.io/jonobr1/pen/ZEXeojy

Also of note, paths like what is returned from two.makeRectangle() method have stroke properties, but that is the color of the stroke, e.g: 'red' or '#f00' or 'rgb(255, 0, 0);'. If you want to change the thickness, you need to set rectangle.linewidth which can be a number like 10.

Hope this helps!

MichaelKatiba commented 2 years ago

Thank you so much, I am trying to learn JavaScript building a simple drawing app and Two.js just seemed so awesome.

Please bear with me in future as I continue to explore, create stuff and ask more questions about this great library.

jonobr1 commented 2 years ago

Glad it helped. Happy coding!