Drawing in html without using canvas, svg or vml | Hacker News Reader

Drawing in html without using canvas, svg or vml

old.etoleto.com

24 pointsdw0rm15 comments

Its a well known technique (using border slants), though I enjoyed to implement it by myself as a simple drawing class that works in major browsers. What I want to know, is where it can be used (or maybe it is useless?), and what should I add or change.

Wait, you can make slanted borders?

This is cool, I didn't know. I googled around and found some more:

http://meyerweb.com/eric/css/edge/slantastic/demo.html

http://infimum.dk/HTML/slantinfo.html (check also links from there)

http://infimum.dk/HTML/rasterTriangleDOM.html

Also please check this link: http://www.uselesspickles.com/triangles/demo.html (I found it after I implemented my algorithm) I use the same method to draw triangles, but a bit more simplified (requires 1 div less per triangle)

Would it be emulate the canvas tag seemlessly for browsers that don't support it such as IE?

IE and or any old browsers can support canvas tag when you use ExplorerCanvas http://code.google.com/p/explorercanvas/

So IE not supporting canvas tag 'officially' isn't really a problem.

EDIT: Just found that ExplorerCanvas has a new home at soundforg. Download here http://sourceforge.net/project/showfiles.php?group_id=163391

I doubt the possibility of emulating canvas tag in ie using this technique, because its very limited compared to canvas (for example, its not possible to draw lines).

This technique can bring cross-browser support of drawing polygons.

Having 1 div per scanline for a circle is going to get pretty memory hungry and slow.

Circle is made of trapezoids, it takes 18 divs to draw the circle from the page.

ah true. Still, having 61 DIVs in the canvas in that example is a fair number.

Still cool though. How about using ● for a circle and scaling the font. I expect you'd have to do some calculations on each platform to adjust for font differences etc, but could work.

Nice idea, I will try to see if its possible to implement it

You can use characters to draw, and it's cross-platform, too:

http://nedbatchelder.com/blog/200805/css_homer_animated.html

(Not that I'd recommend it.)

I should know what font to use, that is available in all operating systems. And how to properly scale and position the character.(should check how the size and position of the character depends on the size of the font)

Manually tried to align them: http://old.etoleto.com/c1/ (orange circles are of text, transparent blue ones of divs) I'm not sure if i should use this instead of divs - being able to select them as text annoys

Novelty script. Now I know you can make slanted borders though.

I can make a nice library out of this scratch. Or maybe create a repo and host it somewhere. But only if i know that people will use it :)

Fun, but not particularly practical.

Reply on news.ycombinator.com