Reputation: 31
i was trying to integrate w3school html5 canvas with flash export createjs i just added this piece of code inside createjs output .
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
but it showed no error . not working ..........
<script>
var canvas, stage, exportRoot;
function init() {
canvas = document.getElementById("canvas");
exportRoot = new lib.Untitled1();
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(24);
createjs.Ticker.addEventListener("tick", stage);
}
</script>
Upvotes: 0
Views: 595
Reputation: 11294
In your sample, you are drawing content to the Canvas context, and then updating an EaselJS stage that uses the same context. EaselJS will clear the context before drawing by default. You can turn off the auto-clear, but that will produce other issues.
A better solution is to use EaselJS to draw your other content.
// Create your red square
var shape = new createjs.Shape();
shape.graphics.beginFill("#FF0000").drawRect(0,0,150,75);
// Create the stage and add the exportRoot
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
// Add your shape to the stage
stage.addChild(shape);
// Then the rest...
stage.update();
createjs.Ticker.setFPS(24);
createjs.Ticker.addEventListener("tick", stage);
If you need to use your own context operations, you can draw them to a separate canvas, then use that canvas as a source for a Bitmap
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
var bitmap = new createjs.Bitmap(canvas);
stage = new createjs.Stage("otherCanvasId");
stage.addChild(exportRoot);
stage.addChild(bitmap);
// Other stuff here
Hope that makes sense!
Upvotes: 2