Highlighted

javascript in animate

New Here ,
Jun 12, 2019

Copy link to clipboard

Copied

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();

Adobe Community Professional
Correct answer by ClayUUID | Adobe Community Professional

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.

Views

190

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

javascript in animate

New Here ,
Jun 12, 2019

Copy link to clipboard

Copied

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();

Adobe Community Professional
Correct answer by ClayUUID | Adobe Community Professional

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.

Views

191

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jun 12, 2019 0
Adobe Community Professional ,
Jun 12, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 12, 2019 0
kdmemory LATEST
Advocate ,
Jun 15, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 15, 2019 1