Image on HTML5 canvas only appearing for one frame

Question

Long time lurker but never made an account. Just wanted to preface that I'm by no means a dev and just tinkering and experimenting for fun, so I apologise in advance if I seem really dumb.

I'm working on a dynamic overlay for Twitch streaming and was previously using AS3 but I've switched over to HTML5 now. I'm trying to load an image onto the canvas (which will eventually be a profile picture fetched using Twitch API... but one step at a time). I'm using Adobe Animate and I have the following so far applied in Actions on the first frame of the layer:

var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d');

show_image();

function show_image() {
    source_image = new Image();
    source_image.src = 'https://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png';
    source_image.onload = function () {
        context.drawImage(source_image, 100, 100);
    }
}

When I hit Ctrl+Enter and see it in Chrome, the image appears for the first frame then disappears. I'm not sure how I'm supposed to get it to stay indefinitely. I need to be able to animate it later, and it'll change depending on the latest follow/donation/sub, etc.

I tried extending the frame itself in the timeline, however, this just changed long how it took to loop and didn't make the image itself stay longer. I'm probably missing something really simple!

Any help would be appreciated. Thanks!

according to your javascript code above, you should get javascript error. Check your browser error console. — Syed Ekram Uddin, Oct 31 '17 at 17:38
In Chrome I do that with Ctrl+Shift+J right? It didn't give me any errors. I tried reloading and checking again, but it's still blank. — thefyrewire, Oct 31 '17 at 17:43
As I checked, there's no errors in your code, but as you are using Adobe Animate, I think you need a different approach. Have you tried using the CreateJS library? (is included with Animate) — cristiancajiaos, Oct 31 '17 at 18:54
Ah! Thank you! I didn't realise I could use CreateJS to load in images! I used ```var bitmap = new createjs.Bitmap("https://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png"); stage.addChild(bitmap);``` and the image has successfully appeared on the canvas permanently :D I tested animating the image with GSAP and it worked flawlessly. Thanks again! Feel free to put that as the answer so I can mark it! — thefyrewire, Oct 31 '17 at 19:58
sorry, my mistake about javascript error in first comment. later i run the code on http://jsbin.com/ranajejeke/edit?html,js,output and its works perfectly. i notice that using 0,0 instead of 100,100 showing the image clearly. also adobe animate might add some animation code in the source, maybe thats why it appears once and disappears again. — Syed Ekram Uddin, Oct 31 '17 at 20:06

score 3 · Accepted Answer · answered Oct 31 '17 at 20:00

Your code is okay if your approach is using a canvas with HTML and JS, without any libraries involved. However, this is not the case, as you are using Animate, and the way to draw graphics with it is different than using default canvas methods like drawImage().

Animate includes the CreateJS suite, which includes the EaselJS library ,and this allows you to use another tools to draw to your canvas. Two or them are the Stage object, the visual container of your animate project, and the Bitmap object, who represents an image, canvas or video. For effects of this question, only both objects are required.

Note that the code below is only for the first frame:

/* It is not necessary to declare the canvas or stage element,
   as both are already declared. At this point the stage is ready to be drawn */

show_image();

function show_image() {
    var source_image = new Image();
    source_image.src = 'https://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png';

    source_image.onload = function(event) {
        /* A new Bitmap object is created using your image element */ 
        var bmp = new createjs.Bitmap(event.currentTarget);

        /* The Bitmap is added to the stage */  
        stage.addChild(bmp); 
    }
}

Image on HTML5 canvas only appearing for one frame

1 Answers1