Nowadays, more and more developers have realized the potential of web application, which leads to a fast growth of related technologies.

Website has become a big canvas for artwork, not only for static drawing, but also for gorgeous animation. Many developers use web not just to display texts, images or videos, they use it to present their designs, ideas and emotions as well.

Such easily accessed artwork platform is attractive and coding for art seems really cool. However, there are many technologies for deisgn and animation work in the web, how to choose them becomes a pratical problem.

Images & videos

The most traditional way, we draw things and animate things in advance and export them as static files. Since web support various format images and videos, what we need to do is simply import them in the HTML.

Advantages

  • Images and videos has mature solutions and tools for both
  • Can be used in other place
  • Complicated curve and lrregular shape

Disadvantages

  • Static file usually has larger size especially when the content is complicated.
  • May need to get hang of extra tools like applications of Adobe family.
  • Limited interaction
  • It's not cool for a coder :)

WebGL

WebGL is based on the Canvas technology of Web but uses its own API. Normally, it is used in 3D field like modeling and games, there are few people use WebGL for 2D animation or decoration since we have better choices.

Advantages

  • Have mature support for 3D.
  • Support complicated interaction. WebGL is actually a web version of OpenGL, we can even build a game in the browser.
  • High performance with complicated and magnificent scene since it's unrelated with the DOM, we just use the WebAPI to get the user input. HTML-GL even uses WebGL to render the webpage.

Disadvantages

  • Hard to learn, not only some javascirpt API, you may need to learn modern GL theory and another language called GLSL in order to communicate with the GPU.+

There is a library three.js which can help us write WebGL application much easier, it has many useful and easy encapsulation.

Canvas

I think Canvas(not WebGL) should be the most suitable choice for 2D artwork with animation since it does not rely on the DOM, it would have better performance with a large number of objects and it is easier to learn than WebGL. Flipborad even used Canvas to render their website to gain more fps.60fps on the mobile web.

Advantages

  • DOM independent, better performance with large number of objects
  • Can express complicated curve and lrregular shape
  • support complicated interaction

Disadvantages

  • DOM independent and the content is based on pixel it can be hard to select and control part of the content like CSS.

Like WebGL, when using canvas to create complicated artwork, it can save much trouble to use libraries like paper.js.

SVG

Actually I do not have much experience with SVG, usually I only use it for icons. In my eyes SVG is more like a special type of image with powerful controllability.

Advantages

  • Support complicated curve and lrregular shape.
  • Rely on DOM and the content is based on shapes, it's easier to select part of SVG
  • Suitable for decorations like icons and textures. (etc. textures.js)
  • Data visualization like what the d3.js does.
  • Have mature tools like photoshop to create SVG image.

Disadvantages

  • Low performance with large number of objects and complicated animation

Even I don't have much experience with SVG, I still have some preference with it. I have read a article called SVG has more potential and I was some kind of suprised by the power of SVG. Recently I found a libarary named mo.js and I think it's really a valuable tools for creators.

By the way, if complicated animation for SVG is needed, we can parse it to canvas for better performance and this is what fabric.js do.

CSS

In CSS3, we have CSS animation and gradient, which give CSS much more creativity. But I still think CSS is more suitable for the global design of website and other traditional CSS things. As for artwork, canvas can have better performance.

Advantages

  • Layout & typesetting
  • Relatively simple and pratical for front-end developers
  • DOM based, the composition and controls are more Intuitive.

Disadvantages

  • There are many rules to remember
  • Limited expression with regular and simple shape
  • Slow performance of animation when DOM is heavy

As for DOM animation, it is said that JQuery's design is not suitable for it, there are many better choices like anime.js and animate.css.

At last

As a newbie in the world of web, I summary these technologies and tools based on my experience and comprehension. There might be many mistakes but I hope this article can help you.