draw some lines and generate an animated movie form it on client (jquery)

Question

I'v been searching the Web for this one without any luck so far. Is it actually possible to make a movie from you custom drawings on a web page?

For example, using a jquery plugin to draw on canvas, after finishing with the drawing the user can click a button "make movie" and would have an animated movie from the drawing.

Is this even possible?

If it's not possible on client side, or there any options on server side: for example i would request an API on the server and i would send the info of all the vectors drawed (ordered in time) to my server which generates the movie and sends back a link?

Answer 1

It depends on what you mean by "movie".

Option#1

You could convert each custom drawing into an image with canvas.toDataURL.

Then create a loop with window.requestAnimationFrame and loop through your images with a series of context.clearRect + context.drawImage( theNextImage,0,0).

Option#2

If you wanted an exportable version of your animation, you could use one of the client-side tools that converts a series of canvas displays into an animated .gif. Here's one example: http://antimatter15.com/wp/2010/07/javascript-to-animated-gif/

Option#3

If you want to encode the set of html canvas drawings into a video format (eg, .MP4) then you'll need additional sophisticated software client-side.

Answer 2

Everything is possible but the issue is if it's realistic or convenient.

Options

You could do all video encoding on client side. There has been attempts on this before but the result and performance is variant (see my former answer here for more details on this approach).

The other option is to encode the frames as GIF animations but be aware of limitations such as reduced palette (max number of colors are 256 in GIF) and you will, in practical terms, need to have a limited number of frames as the format is not stream-able per-se, and you cannot control it's transport (playback, pause, stop) using JavaScript.

The better approach

To encode video the better approach is to send the frames to a server where you can process them using for example FFMpeg. This is open source software and you can use it in a batch script or invoke it from a job etc. FFMpeg is truested and used by many big sites and in professional circles.

It does not seem as there are any plans in HTML5 (at this time) to include any video encoding API.