4

I have an animation with transparent background and a HTML canvas.

Before an object is added to the canvas the animation should be played.

The animation source is a Flash file, there is also an HTML/JS (CreateJS) export and an animated GIF available.

The canvas uses Fabric.js running inside a React application.

My question is the following:

What is the recommended way to implement the animation in the described use case?

At the moment my best approach would be trying to integrate the CreateJS export into the React application and "overlay" the Fabric.JS canvas with the CreateJS canvas while playing the animation. This solution could work and sounds complicated and bloated to me, since I would integrate another canvas library (CreateJS besides Fabric.js) and both need to be synchronized in terms of timing / playing the animation correctly.

Here is a similar unanswered question Animated GIF on Fabric.js Canvas

Community
  • 1
  • 1
Paul Vincent Beigang
  • 2,972
  • 2
  • 16
  • 31
  • You can try shumway : https://github.com/mozilla/shumway – neopheus Jan 09 '17 at 06:24
  • I've answered the question you linked to, so this will give you a workaround : convert your animation to gif, then parse all the frames of this gif and create a sprite-sheet of it. You could also take the createjs canvas, and draw it on your fabricjs one in a rAF loop. But there is no way to draw flash content on the canvas directly. So one final solution would be to use DOM manipulation and CSS to overlay you embedded content over the canvas. – Kaiido Jan 10 '17 at 01:03
  • @Kaiido what do you mean with "rAF loop", can you show an example? – Paul Vincent Beigang Jan 16 '17 at 17:10
  • fabric.js sprite class can be found here http://fabricjs.com/animated-sprite – Paul Vincent Beigang Jan 16 '17 at 17:10

1 Answers1

-2

I know only one way to add images with fabric.js. First you load your images when the page is loading then you display them on the canvas. But for what I have experienced fabric.js set a lot of feature on every element so it become hard to load if you want to display some thousand of images together.

var canvas = new fabric.Canvas('c');
var imgElement = document.getElementById('my-image');
var imgInstance = new fabric.Image(imgElement, {
  left: 100,
  top: 100,
  angle: 30,
  opacity: 0.85
});
canvas.add(imgInstance);
defo
  • 7
  • 4