HTML5 Canvas or SVG?
-
Interesting, but both are too much for what I'm looking for -- basic 2D shapes, texturing and shading is totally unnecessary. That said, maybe I should set my goals a tad higher. Marc
V.A.P.O.R.ware - Visual Assisted Programming / Organizational Representation Learning to code with python is like learning to swim with those little arm floaties. It gives you undeserved confidence and will eventually drown you. - DangerBunny Artificial intelligence is the only remedy for natural stupidity. - CDP1802
Check this list: Images: 2d Graphics - javaScripting.com[^]
Skipper: We'll fix it. Alex: Fix it? How you gonna fix this? Skipper: Grit, spit and a whole lotta duct tape.
-
So, all you experts, I'm looking to move my FlowSharp app to a browser. Should the core tech use the Canvas element or the SVG element? There seems to be pros and cons to both, and I don't have enough experience with either to make an intelligent decision, but it seems rather important to choose the right one from the beginning. Appreciate the feedback in advance. Marc
V.A.P.O.R.ware - Visual Assisted Programming / Organizational Representation Learning to code with python is like learning to swim with those little arm floaties. It gives you undeserved confidence and will eventually drown you. - DangerBunny Artificial intelligence is the only remedy for natural stupidity. - CDP1802
-
Interesting, but both are too much for what I'm looking for -- basic 2D shapes, texturing and shading is totally unnecessary. That said, maybe I should set my goals a tad higher. Marc
V.A.P.O.R.ware - Visual Assisted Programming / Organizational Representation Learning to code with python is like learning to swim with those little arm floaties. It gives you undeserved confidence and will eventually drown you. - DangerBunny Artificial intelligence is the only remedy for natural stupidity. - CDP1802
It sounds like SVG will do what you want. SVG is (as the name implies) vector graphics, basic shapes, etc. while the HTML5 canvas is more about bitmap manipulation. This is not to say that both cannot do both but for line drawing, scaling drawings, etc. SVG has the edge perhaps. I have a web-based application that draws stylized 2D maps and SVG works great. I actually use jquery.svg.js to assist although I have been trying out raphael.js recently.
- I would love to change the world, but they won’t give me the source code.
-
So, all you experts, I'm looking to move my FlowSharp app to a browser. Should the core tech use the Canvas element or the SVG element? There seems to be pros and cons to both, and I don't have enough experience with either to make an intelligent decision, but it seems rather important to choose the right one from the beginning. Appreciate the feedback in advance. Marc
V.A.P.O.R.ware - Visual Assisted Programming / Organizational Representation Learning to code with python is like learning to swim with those little arm floaties. It gives you undeserved confidence and will eventually drown you. - DangerBunny Artificial intelligence is the only remedy for natural stupidity. - CDP1802
I'm still waiting for W3C to accept my HTML <WinForm> element proposal :D
Best, Sander arrgh.js - Bringing LINQ to JavaScript SQL Server for C# Developers Succinctly Object-Oriented Programming in C# Succinctly
-
I'm still waiting for W3C to accept my HTML <WinForm> element proposal :D
Best, Sander arrgh.js - Bringing LINQ to JavaScript SQL Server for C# Developers Succinctly Object-Oriented Programming in C# Succinctly
Sander Rossel wrote:
I'm still waiting for W3C to accept my HTML <WinForm> element proposal
Don't I wish! Marc
V.A.P.O.R.ware - Visual Assisted Programming / Organizational Representation Learning to code with python is like learning to swim with those little arm floaties. It gives you undeserved confidence and will eventually drown you. - DangerBunny Artificial intelligence is the only remedy for natural stupidity. - CDP1802
-
So, all you experts, I'm looking to move my FlowSharp app to a browser. Should the core tech use the Canvas element or the SVG element? There seems to be pros and cons to both, and I don't have enough experience with either to make an intelligent decision, but it seems rather important to choose the right one from the beginning. Appreciate the feedback in advance. Marc
V.A.P.O.R.ware - Visual Assisted Programming / Organizational Representation Learning to code with python is like learning to swim with those little arm floaties. It gives you undeserved confidence and will eventually drown you. - DangerBunny Artificial intelligence is the only remedy for natural stupidity. - CDP1802
cytoscape.js. Simple and awesome!
___ ___ ___
|__ |_| |\ | | |_| \ /
__| | | | \| |__| | | / -
So, all you experts, I'm looking to move my FlowSharp app to a browser. Should the core tech use the Canvas element or the SVG element? There seems to be pros and cons to both, and I don't have enough experience with either to make an intelligent decision, but it seems rather important to choose the right one from the beginning. Appreciate the feedback in advance. Marc
V.A.P.O.R.ware - Visual Assisted Programming / Organizational Representation Learning to code with python is like learning to swim with those little arm floaties. It gives you undeserved confidence and will eventually drown you. - DangerBunny Artificial intelligence is the only remedy for natural stupidity. - CDP1802
depends what you want to accompliah if want graphics that basic shapes could make, and marked up, and interactive the same as "normal" html markup is (like hover and click events), then SVG check out d3.js[^] all that is SVG and document driven interaction. If have specific graphics stuff that you need to do, and do not care so much about user interaction (unless you look at libraries and want to deal with Pixel<> object mapping relations), then Canvas your thing.
-
But surely there's a spiffing framework you can use? Just plug `arcJs` into `canvasSgv` using the latest MVCCMVMCVMVC architecture to leverage server side client API generators. :-D
veni bibi saltavi
(MVC)4
Software Zen:
delete this; -
depends what you want to accompliah if want graphics that basic shapes could make, and marked up, and interactive the same as "normal" html markup is (like hover and click events), then SVG check out d3.js[^] all that is SVG and document driven interaction. If have specific graphics stuff that you need to do, and do not care so much about user interaction (unless you look at libraries and want to deal with Pixel<> object mapping relations), then Canvas your thing.
Wholeheartedly agree.
"There are three kinds of lies: lies, damned lies and statistics." - Benjamin Disraeli
-
depends what you want to accompliah if want graphics that basic shapes could make, and marked up, and interactive the same as "normal" html markup is (like hover and click events), then SVG check out d3.js[^] all that is SVG and document driven interaction. If have specific graphics stuff that you need to do, and do not care so much about user interaction (unless you look at libraries and want to deal with Pixel<> object mapping relations), then Canvas your thing.
maze3 wrote:
if want graphics that basic shapes could make, and marked up, and interactive the same as "normal" html markup is (like hover and click events), then SVG
Yes, exactly, thank you. I've just start poking around d3, will explore more. Marc
V.A.P.O.R.ware - Visual Assisted Programming / Organizational Representation Learning to code with python is like learning to swim with those little arm floaties. It gives you undeserved confidence and will eventually drown you. - DangerBunny Artificial intelligence is the only remedy for natural stupidity. - CDP1802
-
cytoscape.js. Simple and awesome!
___ ___ ___
|__ |_| |\ | | |_| \ /
__| | | | \| |__| | | /Sanjay K. Gupta wrote:
cytoscape.js. Simple and awesome!
Looks impressive. But I'm not really looking for a charting package, but more something that can, for example, be used to create flowcharts. cytoscape seems overkill? Marc
V.A.P.O.R.ware - Visual Assisted Programming / Organizational Representation Learning to code with python is like learning to swim with those little arm floaties. It gives you undeserved confidence and will eventually drown you. - DangerBunny Artificial intelligence is the only remedy for natural stupidity. - CDP1802
-
So, all you experts, I'm looking to move my FlowSharp app to a browser. Should the core tech use the Canvas element or the SVG element? There seems to be pros and cons to both, and I don't have enough experience with either to make an intelligent decision, but it seems rather important to choose the right one from the beginning. Appreciate the feedback in advance. Marc
V.A.P.O.R.ware - Visual Assisted Programming / Organizational Representation Learning to code with python is like learning to swim with those little arm floaties. It gives you undeserved confidence and will eventually drown you. - DangerBunny Artificial intelligence is the only remedy for natural stupidity. - CDP1802
Kornfeld mentioned this web-app today, here, in his "smallest circle" programming challenge: Sketchometry [^] I'm impressed by its speed of drawing and grouping complex shapes. etc. Wonder if you might get some ideas from it. cheers, Bill
«There is a spectrum, from "clearly desirable behaviour," to "possibly dodgy behavior that still makes some sense," to "clearly undesirable behavior." We try to make the latter into warnings or, better, errors. But stuff that is in the middle category you don’t want to restrict unless there is a clear way to work around it.» Eric Lippert, May 14, 2008
-
It sounds like SVG will do what you want. SVG is (as the name implies) vector graphics, basic shapes, etc. while the HTML5 canvas is more about bitmap manipulation. This is not to say that both cannot do both but for line drawing, scaling drawings, etc. SVG has the edge perhaps. I have a web-based application that draws stylized 2D maps and SVG works great. I actually use jquery.svg.js to assist although I have been trying out raphael.js recently.
- I would love to change the world, but they won’t give me the source code.
What do you use for your SVG drawings? I'm using AutoCad, because it has the technical, i.e. geometric features I want readily accessible, much more than my other tool, InkScape, and Expression Design seems to lack them altogether. I love AutoCad, but it seems a but of overkill, and there's a conversion process I haven't got to yet because I haven't finished my first drawing, a line diagram of the Qabbalistic Tree of Life, with layers for the Sephiroth, the Paths, the Hebrew glyphs, and the other symbols.
Follow my adventures with .NET Core at my new blog, Erisia Information Services.
-
So, all you experts, I'm looking to move my FlowSharp app to a browser. Should the core tech use the Canvas element or the SVG element? There seems to be pros and cons to both, and I don't have enough experience with either to make an intelligent decision, but it seems rather important to choose the right one from the beginning. Appreciate the feedback in advance. Marc
V.A.P.O.R.ware - Visual Assisted Programming / Organizational Representation Learning to code with python is like learning to swim with those little arm floaties. It gives you undeserved confidence and will eventually drown you. - DangerBunny Artificial intelligence is the only remedy for natural stupidity. - CDP1802
Personally, I like the single level of indirection SVG would use. Everything Renders it quite nicely, and if you DID need to do something relatively unique, you could easily find the SVG example. Very easy to dump an SVG file and find the issue. Especially vs. Canvas Writing commands. Also, great for importing into a graphics package as vectored and using it in literature. Seems obvious as someone who knows NOTHING about your goals :-)
-
What do you use for your SVG drawings? I'm using AutoCad, because it has the technical, i.e. geometric features I want readily accessible, much more than my other tool, InkScape, and Expression Design seems to lack them altogether. I love AutoCad, but it seems a but of overkill, and there's a conversion process I haven't got to yet because I haven't finished my first drawing, a line diagram of the Qabbalistic Tree of Life, with layers for the Sephiroth, the Paths, the Hebrew glyphs, and the other symbols.
Follow my adventures with .NET Core at my new blog, Erisia Information Services.
I have an application I wrote myself to generate the SVG drawing parameters. My most commonly used objects are simple hexagons or partial hexagons, circles, squares plus a couple of complex images of mythical beasts done by hand.
- I would love to change the world, but they won’t give me the source code.
-
I have an application I wrote myself to generate the SVG drawing parameters. My most commonly used objects are simple hexagons or partial hexagons, circles, squares plus a couple of complex images of mythical beasts done by hand.
- I would love to change the world, but they won’t give me the source code.
I've actually even considered drawing the diagram on an A3 sheet of graph paper, the manually just copying the co-ords into SVG. The paper drawing itself will be so much simpler and quicker than with a cad tool.
Follow my adventures with .NET Core at my new blog, Erisia Information Services.
-
I've actually even considered drawing the diagram on an A3 sheet of graph paper, the manually just copying the co-ords into SVG. The paper drawing itself will be so much simpler and quicker than with a cad tool.
Follow my adventures with .NET Core at my new blog, Erisia Information Services.
-
Personally, I like the single level of indirection SVG would use. Everything Renders it quite nicely, and if you DID need to do something relatively unique, you could easily find the SVG example. Very easy to dump an SVG file and find the issue. Especially vs. Canvas Writing commands. Also, great for importing into a graphics package as vectored and using it in literature. Seems obvious as someone who knows NOTHING about your goals :-)
Kirk 10389821 wrote:
Seems obvious as someone who knows NOTHING about your goals
[This](https://www.codeproject.com/Articles/1136050/FlowSharp) but in a browser. SVG seems to be the winner here in this informal questionnaire. :) Marc
V.A.P.O.R.ware - Visual Assisted Programming / Organizational Representation Learning to code with python is like learning to swim with those little arm floaties. It gives you undeserved confidence and will eventually drown you. - DangerBunny Artificial intelligence is the only remedy for natural stupidity. - CDP1802
-
Kirk 10389821 wrote:
Seems obvious as someone who knows NOTHING about your goals
[This](https://www.codeproject.com/Articles/1136050/FlowSharp) but in a browser. SVG seems to be the winner here in this informal questionnaire. :) Marc
V.A.P.O.R.ware - Visual Assisted Programming / Organizational Representation Learning to code with python is like learning to swim with those little arm floaties. It gives you undeserved confidence and will eventually drown you. - DangerBunny Artificial intelligence is the only remedy for natural stupidity. - CDP1802
Hah, that reminds me of a DOS program I used: EZ-Flow. It had a great feature/mode: Keyboard! You would type a 1 letter code for each object (D for Decision), hit ENTER and then hit an arrow key, it would draw the decision box, and the arrow in that direction and then you type R (I think) for routine, gives a rectangle, completes the arrow for you. If you kept typing, it would fill in the caption until you hit ENTER or something (this was like 1987). The funny part was that I could CRANK OUT Flowcharts really quickly. We had to use them in our documentation, LOL. Everything aligned to grid, which was fine. == But now you have me curious. Are you going to use SVG For the Individual objects, or for the Entire Graph? (I assume the entire graph, since it should handle the moving of attached lines perfectly well). Good luck. Won't it be funny if it was easier to implement than everything you had to do to make the desktop app? Kirk Out!
-
Hah, that reminds me of a DOS program I used: EZ-Flow. It had a great feature/mode: Keyboard! You would type a 1 letter code for each object (D for Decision), hit ENTER and then hit an arrow key, it would draw the decision box, and the arrow in that direction and then you type R (I think) for routine, gives a rectangle, completes the arrow for you. If you kept typing, it would fill in the caption until you hit ENTER or something (this was like 1987). The funny part was that I could CRANK OUT Flowcharts really quickly. We had to use them in our documentation, LOL. Everything aligned to grid, which was fine. == But now you have me curious. Are you going to use SVG For the Individual objects, or for the Entire Graph? (I assume the entire graph, since it should handle the moving of attached lines perfectly well). Good luck. Won't it be funny if it was easier to implement than everything you had to do to make the desktop app? Kirk Out!
Kirk 10389821 wrote:
EZ-Flow.
I vaguely remember that program. :)
Kirk 10389821 wrote:
Won't it be funny if it was easier to implement than everything you had to do to make the desktop app?
We shall see! Marc
V.A.P.O.R.ware - Visual Assisted Programming / Organizational Representation Learning to code with python is like learning to swim with those little arm floaties. It gives you undeserved confidence and will eventually drown you. - DangerBunny Artificial intelligence is the only remedy for natural stupidity. - CDP1802
