melonJS
melonJS copied to clipboard
support using SVG path data when creating a Path2D path
Describe the bug Event though the Path2D implementation has been greatly improved over the last few versions (e.g. better API and support for subpaths), it is not possible today to create a Path2D using a SVG path.
Expected behavior
Extend or finalise the current Path2D implementation in melonJS to accept SVG path such as M173 102a51 51 0 1 1-13-30m20 37h-53, so that SVG can properly be rendered/scaled/transformed/animated in WebGL.
Additional context https://css-tricks.com/rendering-svg-paths-in-webgl/
- Drawing (parsing) a basic Square works
renderer.translate(100, 100);
renderer.path2D.parseSVGPath("M10 10 h 80 v 80 h -80 Z");
renderer.setColor("blue");
renderer.stroke();
- Drawing (parsing) a basic Triangle works
renderer.translate(0, 100);
renderer.path2D.parseSVGPath("M 100 100 L 300 100 L 200 300 z");
renderer.setColor("green");
renderer.stroke();
- drawing (parsing) complex shapes like a heart below, do not work for now
renderer.translate(0, 100);
renderer.path2D.parseSVGPath("M 10 30 A 20 20 0 0 1 50 30 A 20 20 0 0 1 90 30 Q 90 60 50 90 Q 10 60 10 30 z");
renderer.setColor("red");
renderer.stroke();
- only works for now through the WebGL renderer