Scalajs: adding a border to a canvas - scala.js

Question

I've been trying to add a border to a canvas in Scalajs. I mean add a border to the Canvas itself not add a border to an object on the canvas. I am hence looking for methods on the Canvas itself not on the Graphics context from the canvas. So I have the following code which paints a brown square in the top right of the canvas:
val can: html.Canvas = document.createElement("canvas").asInstanceOf[html.Canvas]
document.body.appendChild(can)
val width = window.innerWidth -20
val height = (window.innerHeight - 80)
can.width = width.toInt
can.height = height.toInt
//val dec = new raw.CSSStyleDeclaration()
val gc = can.getContext("2d").asInstanceOf[raw.CanvasRenderingContext2D]
//display.can.setProperty("borderColor", Colour.black.hexStr)
gc.fillStyle = "#AA5500"
gc.fillRect(0, 0, 200, 200)
//dec.borderWidth = "2"
//display.can.style = dec
Looking at the documentation it seems I need to create a CSSStyleDeclaration. But as soon as I uncomment the val dec = ... line, I get a TypeError: Illegal constructor, when I run it in the Web console. Chrome's console points to the following javascript line as the problem:
new $g["CSSStyleDeclaration"]();
Edit: this works, but I'd prefer to use the proper ScalaJs methods rather resorting to dynamic:
can.asInstanceOf[scalajs.js.Dynamic].style = "border:2px solid black;"

Answer 1

This shows how to do the stroke with strokeRect. The canvas.strokeRect splits the stroke so that it falls partially outside and partially inside. There's an adjustment to keep all the stroke inside the canvas. You should be able to convert this to ScalaJs.
var can = document.createElement("canvas");
document.body.appendChild(can);
var width = window.innerWidth -20;
var height = (window.innerHeight - 80);
can.width = width;
can.height = height;
//val dec = new raw.CSSStyleDeclaration()
var gc = can.getContext("2d");
//display.can.setProperty("borderColor", Colour.black.hexStr)
gc.fillStyle = "#AA5500";
gc.fillRect(0, 0, 200, 200);
//dec.borderWidth = "2"
//display.can.style = dec
gc.strokeStyle = "#000000";
var strokeSize = 10;
var halfStroke = strokeSize / 2;
gc.lineWidth = strokeSize;
gc.strokeRect(0 + halfStroke,0 + halfStroke,width-strokeSize,height-strokeSize);