HTML5 2 canvas on a single HTML page

Question

I tried to use 2 different canvas in one html file. I worked fine with the testfiles (which didn´t contain any images). When I use canvas with images, it doesn`t work. Therefore I suspect sth wrong with my library-settings. All files were created with adobe CC flash canvas. Thank you for any help or hints!

<script src="http://code.createjs.com/easeljs-0.7.1.min.js"></script>
<script src="http://code.createjs.com/preloadjs-0.4.1.min.js"></script>
<script src="testfile01.js"></script>

<script>
var canvas, stage, exportRoot;

function init() {
canvas = document.getElementById("canvas");
images = images||{};

var loader = new createjs.LoadQueue(false);
loader.addEventListener("fileload", handleFileLoad);
loader.addEventListener("complete", handleComplete);
loader.loadManifest(libnrone.properties.manifest);
}

function handleFileLoad(evt) {
if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
}

function handleComplete() {
exportRoot = new libnrone.testfile01();

stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();

createjs.Ticker.setFPS(libnrone.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
}
</script>
<script src="http://code.createjs.com/easeljs-0.7.1.min.js"></script>
<script src="http://code.createjs.com/preloadjs-0.4.1.min.js"></script>
<script src="testfile02.js"></script>

<script>
var canvas, stage, exportRoot;

function init2() {
canvas = document.getElementById("canvas2");
images = images||{};

var loader = new createjs.LoadQueue(false);
loader.addEventListener("fileload", handleFileLoad2);
loader.addEventListener("complete", handleComplete2);
loader.loadManifest(libnrtwo.properties.manifest);
}

function handleFileLoad2(evt) {
if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
}

function handleComplete2() {
exportRoot = new libnrtwo.testfile02();

stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();

createjs.Ticker.setFPS(libnrtwo.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
}
</script>

</head>

<body onload="init(); init2();" style="background-color:#D4D4D4">
<canvas id="canvas" width="300" height="250" style="background-color:#FFFFFF"></canvas>
<canvas id="canvas2" width="300" height="250" style="background-color:#FFFFFF"></canvas>

score 0 · Answer 1 · edited May 23 '17 at 10:34

[EDIT/UPDATED]

The key issue here is that you are reusing stage, canvas, and exportRoot variables. This is fine for your init functions, but because the handleComplete methods are asynchronous (they fire when the manifests are loaded), they will always reference the second instances.

Define first instances, and load content
Defined second instances, and load content

At this point, the stage, canvas, and exportRoot variables always reference the second instance you defined.

Assets for canvas 1 OR canvas 2 complete. The stage, canvas, and exportRoot ALREADY reference the second stage.
Assets for the canvas 1 OR canvas 2 complete (whichever loads second). The stage, canvas, and exportRoot STILL just reference the second stage.

Because of the race condition with 3 & 4, you might occasionally see one or the other load on the second canvas.

To solve this, don't reuse the stage, canvas, and exportRoot variables, since they are all referenced in the handleComplete methods.

I have uploaded a working HTML file here: http://playpen.createjs.com/samples/test_2-canvas.html.zip - a few other notes:

reordered the scripts and combined the two inline scripts. I think this makes it easier to handle
reused the same handleImageLoad method, since it is identical.
removed the second Ticker.setFPS() call. Ticker can currently only have one FPS, since there is only one Ticker.

Hope that helps!

-- EARLIER ANSWER FOLLOWS --

Have a look at this answer: Two Flash cc Animations in the same HTML Page

You are just including both definitions, so some of your code is overwriting others. For example, although you are creating init and init2, there are twohandleFileLoadandhandleComplete` methods.

Additionally, you are only "ticking" one stage, since you have commented out the second usage.

Cheers.

hey lanny, thank you alot for your ideas. I changed the second handleFileLoad and handleComplete into handleFileLoad2 and handleComplete2. But I didnt get the ticking thing right. When I add the line createjs.Ticker.addEventListener("tick", stage); suddenly the first animation shows and the second doesnt anymore. without this line the second animation is shown, and the first one not. any suggestions how I can tick both at the same time? — Lena Mayer, Oct 03 '16 at 20:31
Oh, you should make sure you only load CreateJS once. You have multiple script tags for EaselJS & PreloadJS. This should work otherwise. Any chance you can upload a sample zip that I can poke around with? — Lanny, Oct 03 '16 at 22:32
https://www.dropbox.com/s/baq2t1izhbuhd8j/test_2_canvas.zip?dl=0 I know my problems must seem silly for you, but I am just a plain designer without great coding skills. thank you very very much in advance for looking over my files. — Lena Mayer, Oct 03 '16 at 23:17
Posted an updated answer above, along with a sample. Pretty easy solution I think. — Lanny, Oct 04 '16 at 17:47
OMG, Lanny, thank you so much! I celebrate you as my personal hero. it is really unbelievable kind of you to help me like this. I am very happy that the script ist working now so fine. thank you, thank you, thank you. — Lena Mayer, Oct 05 '16 at 09:31

HTML5 2 canvas on a single HTML page

1 Answers1