Pages

Sunday, 12 August 2012

Cross Browser Canvas - Drawing Lines and Shapes (Vectors)

DEMO

Can You Really Draw in IE6?

Yes, using VML shapes/lines you can draw and manipulate shapes and lines. This only works on IE

Example:
<!-- Include the VML behavior -->
<style>v\: * { behavior: url(#default#VML);display:inline-block }</style>

<!-- Declare the VML namespace -->
<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/>

<p>
  <v:polyline id="mypolyline" style="position:relative"
      points="50pt,0pt 120pt,50pt 150pt,100pt 170pt,175pt 250pt,200pt" />
</p> 


What about other Non HTML 5 browsers?

You can use a similar technique with SVG shapes and lines.

Example:
<polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/>

Can You add Events Listeners and Handlers?

Yes, these shapes are normal DOM objects.

What's the limitations?

The main limitation is performance. These techniques where not designed to be animated. 
Also you need to write a lot of code to get it an API working on all browsers.

Is there any API's out there?

Yes, the best one is raphaeljs which has an easy to use API. There is another called explorercanvas which emulates the HTML 5 canvas using the techniques mentioned above.  explorercanvas current works for IE8 and above but it is still improving.





No comments:

Post a Comment