canvas 仮想画面　文字がぼやけてしまいます

<canvas>実画面にそのまま描画するとぼやけないのですが、
仮想画面を経由して描画すると、文字がぼやけてしまいます????
ぼやけないためにはどうすれば良いのでしょうか？また、何が原因で
この差異が生じるのでしょうか？
何卒よろしくお願い致します????‍♀️

const CHRHEIGHT=9;//キャラの高さ
const CHRWIDTH=8;//キャラの幅
const FONT="12px monospace";//使用フォント
const HEIGHT=120;//仮想画面サイズ。高さ
const WIDTH=128;//仮想画面サイズ。幅
const TILESIZE=8;//タイルサイズ（ドット）
const TILECOLUMN=4;//タイル桁数
const TILEROW=4;//タイル行数
const MAP_WIDTH=32;//マップ幅
const MAP_HEIGHT=32;//マップ高さ
const WNDSTYLE="rgba(0,0,0,0.75)";//ウインドウの色
const FONTSTYLE="#ffffff";//文字色

let gImgMap;//地図の画像
let gScreen;//仮想画面
let gWidth;//実画面の幅
let gHeight;//実画面の高さ
let gPlayerX=0;//プレイヤー座標X
let gPlayerY=0;//プレイヤー座標Y

function DrawMain(){
const g=gScreen.getContext("2d");
for(let y=0;y<20;y++){
for(let x=0;x<20;x++){
let px=gPlayerX+x;
let py=gPlayerY+y;
DrawTile(g,xTILESIZE-TILESIZE-2,yTILESIZE,gMap[py*MAP_WIDTH+px]);
}
}
g.fillRect(0,HEIGHT/2-1,WIDTH,2);
g.fillRect(WIDTH/2-1,0,2,HEIGHT);

g.drawImage(gImgPlayer,
CHRWIDTH,0,CHRWIDTH,CHRHEIGHT,
WIDTH/2-CHRWIDTH/2,HEIGHT/2-TILESIZE/2,CHRWIDTH,CHRHEIGHT);

g.fillStyle=WNDSTYLE;
g.fillRect(20,103,105,15);
g.font=FONT;
g.fillStyle=FONTSTYLE;
g.fillText("Hello World",25,115); 　　　　　　　　　//⬅︎
}

function DrawTile(g,x,y,idx){
const ix=(idx%TILECOLUMN)*TILESIZE;
const iy=Math.floor(idx/TILECOLUMN)*TILESIZE;
g.drawImage(gImgMap,
ix,iy,TILESIZE,TILESIZE,
x,y,TILESIZE,TILESIZE);
}

function WmPaint(){
DrawMain();
const ca=document.getElementById("main");
const g=ca.getContext("2d");
WmSize();
g.drawImage(gScreen,
0,0,gScreen.width,gScreen.height,
0,0,gWidth,gHeight);
}

function LoadImage(){
gImgMap=new Image(); gImgMap.src="map.png";
gImgPlayer=new Image(); gImgPlayer.src="player.png";
}

window.onkeydown=function(ev){
略
}
const gMap=[
0,5,0,略
略2,0,9,0,
];