Javascriptのみでキャンバスを作成する

Question

###前提・実現したいこと
javascriptのみでcanvasを作成したいのですが、特定のスタイル要素が反映されません。どうすればいいのでしょうか。
CSSの設定もjavascriptでおこなっていますが、width,heigh,position,zIndexは反映されましたが、top,leftは反映されませんでした。
この問題はブラウザ側の問題なのか、それともソースコードの問題なのか判断してほしいです。
ちなみにデバック環境はedgeを使っています。

###該当のソースコード

//bodyに記述
function　createCanvas(){
canvas = document.createElement("canvas");
	 canvas.width = 100 ;
	 canvas.height = 100 ;
	 //CSS
	 canvas.style.position = "absolute" ;
	 canvas.style.top　= 100 ;
	 canvas.style.left = 100 ;
	 canvas.style.zIndex = 1 ;
 
	 document.body.appendChild(canvas);
}

createCanvas();

参考サイト

Answer 1

単位を指定する必要があります

canvas.style.top　= "100px";
canvas.style.left = "100px";

Comments

[meron-pan]

ありがとうございます。見事に反映されました。

Answer 2

loadしてから実行してみては？

window.onload=function(){
  canvas = document.createElement("canvas");
  canvas.width = 100 ;
  canvas.height = 100 ;
  canvas.style.position = "absolute" ;
  canvas.style.top　= 100 ;
  canvas.style.left = 100 ;
  canvas.style.zIndex = 1 ;
  document.querySelector("body").appendChild(canvas);
}

Comments

[meron-pan]

今は修正しましたが、bodyでファイルを読み込ませているのでそこは原因ではないかと思います。