diff --git a/examples/index.html b/examples/index.html
index d302464..7da12a0 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -66,7 +66,7 @@
Original GIF
const $ = document.querySelector.bind(document);
const $$ = document.querySelectorAll.bind(document);
- const $view = $('#root');
+ const $canvas = $('#root');
const $preview = $('#preview');
const $buttons = Array.from($$('button[data-src]'));
const $play = $('#play');
@@ -104,9 +104,9 @@ Original GIF
function playAnimation(imageName, imagePath) {
clearAnimation();
animation = animations[imageName];
- $view.width = animation.width;
- $view.height = animation.height;
- app.renderer.resize($view.width, $view.height);
+ $canvas.width = animation.width;
+ $canvas.height = animation.height;
+ app.renderer.resize($canvas.width, $canvas.height);
$preview.src = imagePath || imageName;
$slider.max = animation.totalFrames - 1;
currentAnimation = animation;
@@ -131,9 +131,10 @@ Original GIF
await app.init({
width: 476,
height: 280,
- canvas: $view,
+ canvas: $canvas,
backgroundAlpha: 0,
hello: true,
+ preference: 'webgl',
});
const resources = await PIXI.Assets.load(sources);
$buttons.forEach($button =>
diff --git a/src/AnimatedGIF.ts b/src/AnimatedGIF.ts
index d2b4997..36ee0b0 100644
--- a/src/AnimatedGIF.ts
+++ b/src/AnimatedGIF.ts
@@ -259,6 +259,9 @@ class AnimatedGIF extends Sprite
{
super(Texture.EMPTY);
+ // Handle rerenders
+ this.onRender = () => this.updateFrame();
+
// Get the options, apply defaults
const { scaleMode, width, height, ...rest } = Object.assign({},
AnimatedGIF.defaultOptions,
@@ -288,8 +291,6 @@ class AnimatedGIF extends Sprite
{
this.play();
}
-
- this.onRender = () => this.updateFrame();
}
/** Stops the animation. */