javascript in animate

[otherelse]

Why this does not show in Chrome browser?

Note: I dont want to use createjs // my problem is in pure js

this seems to be not needed in Animate.   Why???

//var canvas = document.getElementById('canvas');

var ctx = canvas.getContext('2d');

var x1 = 400, x2 = 300, y1 = 300, y2 = 50

ctx.lineWidth = 7;

ctx.beginPath();

ctx.strokeStyle='red';

ctx.moveTo(x1, y1);

ctx.lineTo(x2, y2);

ctx.lineTo(x1, y2);

ctx.lineTo(x2, y1);

ctx.stroke()

ctx.fillStyle = "blue";

ctx.fill();

[ClayUUID · Accepted solution]

Are you saying the above code works in other browsers but not Chrome?

It shouldn't work in any browser, because CreateJS clears and repaints the entire canvas every frame. Of course anything you manually draw to it will get clobbered. CreateJS owns the canvas. If you want to draw on it, you'll have to use CreateJS to do it.

this seems to be not needed in Animate.   Why???

//var canvas = document.getElementById('canvas');

Because Animate already does exactly that in the first line of the init() function that it generates.

[kdmemory]

Hi otherelse

ClayUUID is right, CreateJS owns the canvas. At least in Animate.

It seems to me that you should study the Graphics Class in EaselJS (most important module of CreateJS).

"Note: I dont want to use createjs // my problem is in pure js"

Na, na - thats a pure intention but won't help you when you are in Animate. The whole Animate/HTML5/Canvas business means CreateJS. That's a library to ease the dealings with HTML5 Canvas. Things like

var ctx = canvas.getContext('2d');

are not necessary in the context of Animate and CreateJS.

And the line

var x1 = 400, x2 = 300, y1 = 300, y2 = 50

should end with semicolon.

Klaus