3 ms·
It's interactive, for starters. You can do that with SVG, of course, but the boilerplate required would be larger than the `.canvas` file. You can externalize t
by itishappy 6mo ago
It's interactive, for starters. You can do that with SVG, of course, but the boilerplate required would be larger than the `.canvas` file. You can externalize the boilerplate, but then you're no longer creating portable SVG files, and if we're going to create an SVG-like DSL we may as well try out this JSON-like DSL.
- rendaw 6mo agoThis isn't obvious to me. You can have javascript external to the svg for making it interactive, it doesn't have to be embedded in the svg. And the interactivity for json canvas isn't embedded in the canvas json either.
- itishappy 6mo agoIf we're adding external interactivity, we're treating each as a custom DSL format and need to evaluate them as such: JSON Canvas: graph primitive easier to read, write, and reason about harder to render SVG: path primitive easier to render harder to read, write, and reason about
- StilesCrisis 6mo agoInteractive like this? https://yqnn.github.io/svg-path-editor/ https://yqnn.github.io/svg-path-editor/ I still don't see your point. Why wouldn't I always choose SVG? What problem or pain point is being solved?
- itishappy 6mo agoIt's not interactive for me: https://codepen.io/ItIsHappy/pen/vEXrXxg https://codepen.io/ItIsHappy/pen/vEXrXxg Yes, I'm being pedantic, but that was the point of my comment. SVGs aren't interactive by default, you need to bring your own interactivity. For static content, SVGs work great, but for interactive content the additional sematic layer of JSON Canvas has a clear benefit. SVGs represent connections using paths, while JSON Canvas uses a graph. This means SVG cannot connect a single node to more than 2 adjacent nodes. If I want to draw arrows from Alice, Bob, and Charlie all to Dave, then I need to create a second Dave or reference to that location somehow. (You can see this in your sword example by moving one of the edge points. The sword delaminates because only two of the four edges at that point can be connected together.) SVG provides limited tooling for this, but it gets rather complicated rather quickly.
- StilesCrisis 6mo agoCool, now show me a codepen with an interactive JSON Canvas?
- deleted 6mo ago[deleted]
- itishappy 6mo agoFair point, SVGs are more portable. They're also more capable (and complicated). JSON Canvas is a more specific tool. Both of the following examples show the same thing, but the SVG representation doesn't convey the structure: JSON Canvas: { "nodes": [ {"id": "a", "type": "text", "text": "Alice", "x": 20, "y": 50, "width": 40, "height": 10}, {"id": "b", "type": "text", "text": "Bob", "x": 170, "y": 50, "width": 40, "height": 10}, {"id": "c", "type": "text", "text": "Charlie", "x": 320, "y": 50, "width": 40, "height": 10}, {"id": "d", "type": "text", "text": "Dave", "x": 170, "y": 150, "width": 40, "height": 10} ], "edges": [ {"id": "ad", "fromNode": "a", "toNode": "d"}, {"id": "bd", "fromNode": "b", "toNode": "d"}, {"id": "cd", "fromNode": "c", "toNode": "d"} ] } SVG: <svg width="400" height="200"> <text x="20" y="50" >Alice</text> <text x="170" y="50" >Bob</text> <text x="320" y="50" >Charlie</text> <text x="170" y="150">Dave</text> <line x1="40" y1="60" x2="190" y2="130" stroke="black"/> <line x1="190" y1="60" x2="190" y2="130" stroke="black"/> <line x1="340" y1="60" x2="190" y2="130" stroke="black"/> </svg>