SVG Sample

Sets up a canvas, stage, and tick

by lannymcnie

HTML

<script src="http://dev.gskinner.com/createjs/easeljs-NEXT.combined.js"></script>
<script src="http://dev.gskinner.com/createjs/preloadjs-NEXT.combined.js"></script>
<canvas id="canvas" width="400" height="400"></canvas>

CSS

canvas { border: 1px solid #000; }

JavaScript

var imageManifest = [
    { id: "MySvgImage", src: "http://php5.gskinner.com/CORS/circles1.svg" }
];

var stage = new createjs.Stage("canvas");

var assetQueue = new createjs.LoadQueue(true, null, true);
assetQueue.on('complete', complete);
assetQueue.on('error', function(e) {
    console.log(e);
});
assetQueue.loadManifest(imageManifest);

function complete(e) {   
    // DOESN'T WORK
    var svg = assetQueue.getResult('MySvgImage');
    document.body.appendChild(svg);

    var svgImage = new createjs.Bitmap(svg);  
    stage.addChild(svgImage);
    stage.update();
    
    createjs.Ticker.addEventListener("tick", stage);
}