HTML5 canvas player.


Updated the mention on the official website -

I would like to mention that packing all linked files into (zip) container is planned as a feature of upcoming new file format of Synfig - Konstantin's weekly report #4


Why not make it a plugin for media goblin



Zelgadis the problem is not the collection of the files but the extension. sif we need xml for some server restrictions.

John the real need is a super fast vector rendering engine so we can override the need of cache.


The new packed format is just a zip file. It will be possible to save it back to .sif (xml) and all contained resources will be saved into folder. In fact, it’s already works in current development version, but for images only. :slight_smile:


Although John’s style of writing is off-putting as usual, I have to agree that MediaGoblin plugin would be really nice. Media Goblin is not a cache. It’s a media-hosting platform. Like openclipart or blendswap. But they pretend to be universal system for various kind of mediaformat. The main problem is to offer preview for medias. IIRC, they already have preview for blender files and the similar plugin for .sif files would be a extremely cool. That could open possibility to launch a some kind of synfig clipart service.


Hi. Sorry for the delayed response.
I had a look at the GoblinMedia and I think that the plug in is possible. I have to find some free time to setup a working test.
I don’t really support the idea but I will try to make something out of it.

P.S. Also GTA5 is out and my hobbies turned to gaming, if you know what I mean…


Wanted to make a banner using the html5 canvas player. I downloaded the latest EaselSif_Master but when I ran the easelsif.html or the easelsif_test.html files nothing happens. Can’t I view the test locally? The provided testfile can be opened in synfig and it’s not compressed.

edit: I had to reinstall Firefox. Now the testfile works. :smiley:


You downloaded the new version that I uploaded a few days ago.
This new version fix some bugs of the old version but in general it moves to the 64.1 dev synfig.
There is support for the skeleton layer but only for linked group layers.

  • does not use cache so you will have hight cpu activity. I will make a new update for cache in the following days, if not a rought one today.
  • group layer’s skew_angle it’s not supported yet. (I have no idea how to add skew angle in a affine matrix. I have to do some reading cause I was unable to find a quick answer on that.) Keep this in mind cause If you link a group layer to a bone sometimes the base value uses the skew_angle. So you will have to get it to 0 by hand for the linked group to work as expected.
    -gradients are not supported yet.

Also don’t forget to use createjs’s CDN. (this will be good for your bandwidth)



I did not encounter any major problems yet with the new html5 player other than that group opacity does not seem to be supported. Also there does not seem to be any pastecanvas.js anymore in the src folder but I don’t know if that is still needed. Most of the ofline local tests I did in FF and chrome worked like a charm, but when I uploaded the files to a server to be viewed online, I got a blanc page and some javascript related errors. I did not change the code and the index file showed the right and proper sif file locally in FF, but online I always get a blanc page. The screenshot I took came from my pancake io test website but I get the same errors on other normal servers as well. I am not a javascript wizard so any ideas are welcome. :blush:


I managed to solve the problem. :smiley: Problem was the xml document not loading because I named it .sif and not xml. Doh… :unamused: The other error was jus a warning and did not influence the outcome. Now it’s time to do some animated tests.


I just uploaded the new version with cache. You will see huge increase in frame rate and a decrease of cpu usage.
Added the opacity of group layer too.

Darkspace is the warning you got this :

Use of getPreventDefault() is deprecated.  Use defaultPrevented instead.

Also PasteCanvas is removed there is no use of it anymore.
Import Image layer does not work too. I have to add this switch image layer too.

Community please test this program and report bugs and missing futures.
Synfig is a beast and lately it’s becoming an angry beast so adding all the futures will be a big task.


The added opacity to the group layer is a big time saver! Good job on that.
The warning I got was this: “Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience.” but I don’t think it caused any problems.

edit: also the first little animation test I did on my pancake site that is hosted thru dropbox account was successful which is quite cool, cos that way I don’t have to upload anything.


I did some tests using the latest version of the html5 sif player.
You can watch the results here:
Here is what I found so far:
Feathering on the single image of the little dwarf did not work (I used it on the ground shadow and the shadow of the body) Shadow of the body was correct so the onto blend mode I used to place it works. Advanced outlines don’t work and the thickness of the normal outlines always stays the same. That can give problems in smaller images. The dwarf image is a rather complex file with lots of groups and subgroups but it was rendered correct, so that works too. Vertex animation I used on the waves works. Moving objects around like the sun works too. Opacity of singles objects works and group opacity works too (fade in of the dwarf image is group opacity). Interpolation is out of sync: the two clouds in the fourth and fifth banner don’t have the same interpolation but still they move at the same speed. I can make several canvases with single images and diferent animation next to or on top of each other so that is cool, although probably slows down the rest of the site. This demo site was hosted thru my dropbox so I don’t know if that has any influence on the speed.
Anyway, you can do cool stuff with the player: one thing that comes to my mind is an animated comic.
More tests will come if time is on my side.


Feathering it’s a blur. No blur yet. (Easeljs may open this possibility but I haven’t tried it).
For the basic line you have to change the “Outline Width”.
Interpolations right now are only (linear, constant) . I haven’t found a equivalent of Clamped or TCB in tweenjs. So I have to find a way to create them.

I belive there must be no slow down from dropbox or pancakeapps.

Pancakeapps by the way looks interesting.

Right now I am working on loading the external files. So we will have linked sif objects.


Outline width support works, but there are some changes compared to the original synfig render. Apart from the change in color the change in outline width by the sif player is more subtle and you have to make your outlines in Synfig really wide and thick before the sif-player picks up the changes in width. I think that from an animation point of view adding some kind of tweening or easing interpolation apart from constant and linear would be more useful then the ability to use blurs.


About the color, the output must look similar to synfig with Gamma setted to 1.0.
Synfig Studio Setup => Gamma panel R 1.0 G 1.0 B 1.0

EaselSif use the data that are stored in the sif file. It does not take care of the Gamma.

About the line width. Advanced outline it’s not supported. I think you just get the render without advanced outline.

In general you may find it hard to use existing work cause you have to deal with the Gamma and the limitations of easelSif.


Uploaded the new version. This time the imported sif files are going to work.
But there is a downside.
To test it localy you have to create a simple local http server.
Well if you have python it’s realy easy.
Open a terminal or a comand prompt console.
navigate to the easelSif dierctory and then type :

python -m SimpleHTTPServer

Then open your browser and enter this adress



Cool. Now if we’d add ability to script sifs with JS, it would be good alternative to decaying flash player…



Easeljs and TweenJs that I use are part of the
The current version it’s only for rendering test but the next will include the ability to use the group layers for example as a Container object of easeljs.
You will also have the ability to setup function to override to add your functionality based on the rules of easeljs.

All I do right now is overriding some of the easeljs DysplayObject functions to get the synfig params in.

I think I will bother you with names ones more. I plan to change the name of the lib again to createSif and remove all the sifPlayer.easelSif to createSif.
As I am using and preloadjs now and I plan to use SoundJs for audio this makes sense to me.