Link to home
Create AccountLog in
Avatar of codequest
codequest

asked on

Drawing Shapes in HTML5

I am currently creating an asp.net webpage diagram using images for rectangles, rounded rectangles and arrows.

Does HTML5 / CSS3 offer ways to display such graphics without resorting to images?

Any guidance on this would be appreciated.

Thanks!
SOLUTION
Avatar of Tom Beck
Tom Beck
Flag of United States of America image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Do you want to supply a simple graphic image of what you are trying to achieve?
Avatar of codequest
codequest

ASKER

Sample attached.   Text would overlay the graphics.  The arrowheads might need to be larger.
diagram-sample.png
SOLUTION
Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Thanks for the inputs.  The target is a dynamically drawn diagram. It has a very specific layout that it has to follow, so the Jquery flowchart programs would probably not work. Those are Very interesting though. It could be also that CSS is not a solution because ie8 does not support rounded border radius, although by app release date it may be feasible to say Ie8 is not supported. At any rate these are very good and eye-opening suggestions.

I guess one more requirement that i'm not sure how would work in CSS is that the diagrams need to be scalable, with a zoom slider, not just through browser Pinch and zoom. Any suggestions on that would be appreciated. Thanks!
SOLUTION
Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
SOLUTION
Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Thanks for the inputs.  These have been very educational, and I'm getting the sense I can accomplish what I want without using images.

There are two more requirements that I did not spell out (sort of buried them under the phrase "dynamically drawn".)
1)  the elements of the diagram may be re-positioned on the fly.
2)  the elements of the diagram may change size in relation to the other parts.

The raw information about size and position of all the diagram parts will be recalculated on the servers after any user action, sent to the browser via JSON and then translated into DOM.  It seems like I should be able to make the necessary CSS generation part of the translation from JSON into DOM.

Confirmation on that would be appreciated.  The rest I'm confident I can figure out from the examples that have already been provided.
ASKER CERTIFIED SOLUTION
Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Very helpful comments, all.  Thanks!