CODEWITHSUNDEEP
javascriptcanvascreatejs
Salma
Salma

Reputation: 31

createjs html5 canvas integration not working

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

Answers (1)

Lanny
Lanny

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

Related Questions