Drawing in html without using canvas, svg or vml

http://old.etoleto.com/divcanvas/

by dw0rm • 18 years ago

24 15 18 years ago

old.etoleto.com

dw0rm7• 18 years ago

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.

halo• 18 years ago

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

dw0rm7• 18 years ago

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.

SingAlong• 18 years ago

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

bd• 18 years ago

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

dw0rm7• 18 years ago

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)

axod2• 18 years ago

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

dw0rm7• 18 years ago

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

axod2• 18 years ago

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.

kwamenum86• 18 years ago

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

dw0rm7• 18 years ago

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 :)

tlrobinson• 18 years ago

Fun, but not particularly practical.

Drawing in html without using canvas, svg or vml

Related Stories