HTML5 Canvas for Data Driven Graphic Manipulation
Web technologies are sprouting every now and then, which gains support across different browsers. In creating graphic inside the browser IE9 goes for SVG while Mozilla Firefox browser goes for HTML5 Canvas. It has become tough for web developers to decide which Web technology to use for say rendering 2D shapes and bitmap images in a browser.
There is a split between HTML5 Canvas and SVG, which are basically different. Having the knowledge of the differences will give effective and appropriate use of the Web technology. In new projects both Web technologies can render web graphics.
If interactivity on the graphic is required then SVG will be more appropriate such as maps where mouse events are necessary. But, SVG might not be effective on data driven charts due to the numerous DOM manipulations which HTML5 Canvas does better. Thus, canvas which is not on the DOM tree is best for pixel based drawings. Furthermore, in high animations canvas works well.
I’ve seen that most web developers recommend using Canvas over SVG on data driven graphics. Popularity might be due to the HTML5 adoption in many modern web browsers. Everything depends on which Web technology one is comfortable working with and how it is being used. The same result could be achieved, but there are many exciting developments with HTML5 canvas, which makes it the preference for data driven graphic manipulation.
Posted on
Thursday, July 8th, 2010 at 1:39 am under 