Load html5 canvas publish of animate cc multiple times

Question

The publish output of Animate CC gives html file and js file. I want to draw the same drawing two times in the same canvas. From this example, i want to have output as

How can i change the javascript to achieve this without having two canvas tag? I want to have numerous instance of it in single canvas tag.

score 2 · Answer 1 · answered Apr 24 '18 at 15:52

If you are trying to achieve the image above, you can simply create two instances of simple_canv class.

Try this:

var canvas, stage, exportRoot;

function init() {

 canvas = document.getElementById("canvas");
 exportRootLeft = new lib.simple_canv();
 exportRootRight = new lib.simple_canv();
 exportRootRight.x = 555;

 stage = new createjs.Stage(canvas);
 stage.addChild(exportRootLeft, exportRootRight);
 stage.update();
 stage.enableMouseOver();

 createjs.Ticker.setFPS(lib.properties.fps);
 createjs.Ticker.addEventListener("tick", stage);


 init_app()

}

Also, remember to increase the width of your canvas.

score 0 · Answer 2 · edited Apr 24 '18 at 08:38

Is this what you are looking for?

<!DOCTYPE html>
<html>
    <body>

        <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
            Your browser does not support the canvas element.
        </canvas>

        <script>
            var canvas = document.getElementById("myCanvas");

            var ctx1 = canvas.getContext("2d");
            var ctx2 = canvas.getContext("2d");

            ctx1.fillStyle = "red";
            ctx1.fillRect(0,0,50,50);

            ctx2.fillStyle = "blue";
            ctx2.fillRect(50,0,50,50);
        </script>

    </body>
</html>

You can then change what you render.

Load html5 canvas publish of animate cc multiple times

2 Answers2