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

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