# Usage of CreateJS in Adobe Animate CC for adding image on Canvas

**URL:** <https://forum.kirupa.com/t/usage-of-createjs-in-adobe-animate-cc-for-adding-image-on-canvas/637415>\
**Category:** Uncategorized\
**Created:** [November 10, 2017, 12:12pm UTC](https://forum.kirupa.com/t/usage-of-createjs-in-adobe-animate-cc-for-adding-image-on-canvas/637415 "2017-11-10T12:12:40Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Olav\_Ata](https://avatars.discourse-cdn.com/v4/letter/o/2acd7d/32.png) [@Olav\_Ata](https://forum.kirupa.com/u/Olav_Ata)\
**Post date:** [November 10, 2017, 12:12pm UTC](https://forum.kirupa.com/t/usage-of-createjs-in-adobe-animate-cc-for-adding-image-on-canvas/637415/1 "2017-11-10T12:12:40Z")

</div>

I would like to ask community how to implement addChild function in HTML5 Canvas type in Animate CC.  
Here is a very simple scenario:  
On the Canvas there are a MovieClip container (by name “imageContainer”) and button (by name “getContent\_btn”). The code listed below doesn’t work?

Here is defined functions for image loading using CreateJS

```auto
function loadImage() {
  var preload = new createjs.LoadQueue();
  preload.addEventListener("fileload", handleFileComplete);
  preload.loadFile("someimage.png");
}

function handleFileComplete(event) {
	this.imageContainer.addChild(event.result);
}

```

And here is button function and listener

```auto
this.getContent_btn.addEventListener("click", fl_MouseClickHandler.bind(this));

function fl_MouseClickHandler()
{
   loadImage();
}

```

Thanks in advance!

---

<div class="post-metadata">

**Author:** ![Olav\_Ata](https://avatars.discourse-cdn.com/v4/letter/o/2acd7d/32.png) [@Olav\_Ata](https://forum.kirupa.com/u/Olav_Ata)\
**Post date:** [November 10, 2017, 9:40pm UTC](https://forum.kirupa.com/t/usage-of-createjs-in-adobe-animate-cc-for-adding-image-on-canvas/637415/2 "2017-11-10T21:40:34Z")

</div>

I found solution in other forum.

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [November 10, 2017, 10:19pm UTC](https://forum.kirupa.com/t/usage-of-createjs-in-adobe-animate-cc-for-adding-image-on-canvas/637415/3 "2017-11-10T22:19:52Z")

</div>

What was it?

---

<div class="post-metadata">

**Author:** ![prg9](https://avatars.discourse-cdn.com/v4/letter/p/8dc957/32.png) [@prg9](https://forum.kirupa.com/u/prg9)\
**Post date:** [November 11, 2017, 7:00pm UTC](https://forum.kirupa.com/t/usage-of-createjs-in-adobe-animate-cc-for-adding-image-on-canvas/637415/4 "2017-11-11T19:00:53Z")

</div>

Looks like the solution was from here:  
[https://forums.adobe.com/thread/2409963](https://forums.adobe.com/thread/2409963)

---

<div class="post-metadata">

**Author:** ![Olav\_Ata](https://avatars.discourse-cdn.com/v4/letter/o/2acd7d/32.png) [@Olav\_Ata](https://forum.kirupa.com/u/Olav_Ata)\
**Post date:** [November 12, 2017, 6:28pm UTC](https://forum.kirupa.com/t/usage-of-createjs-in-adobe-animate-cc-for-adding-image-on-canvas/637415/5 "2017-11-12T18:28:17Z")

</div>

Yes, prg9 is right.  
I found solution in adobe forum but i will place it here:

var this\_var = this;  
var preload = new createjs.LoadQueue();

function loadImage() {  
preload.addEventListener(“fileload”, handleFileComplete);  
preload.loadFile({  
src: “someimage”,  
id: ‘someid’  
});  
}

function handleFileComplete(event) {  
var someid = preload.getResult(“someid”);  
var bmp = new createjs.Bitmap(someid);  
this\_var.container.addChild(bmp);  
}

this.getContent\_btn.addEventListener(“click”, fl\_MouseClickHandler.bind(this));

function fl\_MouseClickHandler() {  
loadImage();  
}

But there is one more detail here. I found that it is possible to use exportRoot instead of this\_var.  
So this\_var.container.addChild(bmp); goes into exportRoot.container.addChild(bmp);

By the way  
in respect to You Senocular