Prototyping of possible enhancements to the WHATWG Path2D interface.
npm install path2d-inspectionThis project explores ways to enhance the WHATWG Path2D interface.
The Path2D interface greatly improved the way we write Canvas 2D code, with easy to reference path declarations that can be used by many methods of the Canvas 2D API. However as it stands, this interface is completely opaque and thus doesn't unleash all its power.
We use SVG as a prior-art example of what methods could be useful for this interface.
Currently we added a few new methods to the Path2D interface:
``js`
const def = path.toSVGString();
// "M0 0L150 150L180 150A30 30 0 0 1 120 150"
Beware, doesn't necessarily match svgString.
js
const box = path.getBBox();
/*
* {
* left: 0
* top: 0
* right: 180
* bottom: 180
* width: 180
* height: 180
* }
*/
`$3
Note that unlike in SVG this method doesn't accept the
option. Path2D always uses absolute commands.
`js
const segments = path.getPathData();
/*[
* {
* "type": "M",
* "values": [
* 0,
* 0
* ]
* },
* {
* "type": "L",
* "values": [
* 150,
* 150
* ]
* },
* ...
*/
`$3
js
path.setPathData([
{
type: "M",
values: [
0,
0
]
},
{
type: "L",
values: [
10,
10
]
}
]);
ctx.stroke(path); // draws a line from 0,0 to 10,10
`Planned additions:
-
-
- This is not recommended no. This project is really just a prototype to see what could be useful additions to the specifications and doesn't aim neither 100% bug free code (testing is still done manually and doesn't cover much) nor do we aim at good performances in any way.
Obviously we won't prevent you from using it, but you are warned.
But if you're not afraid and want to see if this can be useful then please do so and let us your feedback.
We want to thank Vitaly Puzrin and all the contributors of https://github.com/fontello/svgpath for their awesome SVG path data parser.
We also thank the authors of https://github.com/icons8/svg-path-bounding-box who saved us a few hours of work.