canvas rect() doesn't work in Animate CC?

[jeroens79346164]

Hi,

I'm trying to create a template for HTML5 banner ads in Animate CC.

I want to draw a rectangle in Javascript that's 100% the width and height of the stage, and apply a 1px, 10% Alpha, black border on it.

The problem is, that the script W3schools provide doesn't seem to work in Animate CC. It works anywhere else:

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.rect(0, 0, c.width, c.height);
ctx.strokeStyle="#000000";
ctx.globalAlpha=0.1;
ctx.stroke();
ctx.globalAlpha=1;

I'm fairly new to scripting, and spend a while searching the internet for answers with no success.

Does anyone know how to draw shapes using Javascript inside Adobe Animate CC?

"Why not just draw a rectangle with the shape tool?"

Having a scripted border that always takes on 100% the width and height of my stage helps me skip the step of having to change the border every time I create a new banner size.

UPDATE:

I've put the script inside a function, linked it to an onClick EventListener. It seems that the script does work, but the border is disappearing after a fraction of a second.

Not sure why it does that

function myFunction() {
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.rect(0, 0, c.width, c.height);
ctx.strokeStyle = "#ff0000";
ctx.globalAlpha = 1;
ctx.stroke();
}
document.getElementById("canvas").addEventListener("click", myFunction);

[ClayUUID · Accepted solution]

Just so I'm understanding your question, you're trying to draw a rectangle to the canvas. The same canvas that Animate clears and redraws from scratch every single frame. And you're wondering why it's not working. Does that about sum it up?

[jeroens79346164]

Ah! So there is the problem.

Never knew it redraws the canvas every single frame.

Is there a way to still draw rectangles using script in Animate CC?