HTMLで将棋の駒の動かし方を表現したいです

HTMLで将棋の駒の動かし方を表現したいですのですが、駒の名前がうまく表示されません。
どなたか解決策を教えてください。

<html><head><meta character="UTF-8">
<title>pieces</title><script>
<!--
	var canvas;
	var ctx;
	var nametbl = [
	"玉","飛","角","金","銀","桂","香","歩","","竜","馬","","全","圭","杏","と",
	];
	var x1 = [0,1,1,1,0,-1,-1,-1,1,-1];
	var y1 = [-1,-1,0,1,1,1,0,-1,-2,-2];
	var movtbl = [
		[1,1,1,1,1,1,1,1,0,0],		//0
		[2,0,2,0,2,0,2,0,0,0],		//1
		[0,2,0,2,0,2,0,2,0,0],		//2
		[1,1,1,0,1,0,1,1,0,0],		//3
		[1,1,0,1,0,1,0,1,0,0],		//4
		[0,0,0,0,0,0,0,0,1,1],		//5
		[2,0,0,0,0,0,0,0,0,0],		//6
		[1,0,0,0,0,0,0,0,0,0],		//7
		[0,0,0,0,0,0,0,0,0,0],		//8
		[2,1,2,1,2,1,2,1,0,0],		//9
		[1,2,1,2,1,2,1,2,0,0],		//10
		[0,0,0,0,0,0,0,0,0,0],		//11
		[1,1,1,0,1,0,1,1,0,0],		//12
		[1,1,1,0,1,0,1,1,0,0],		//13
		[1,1,1,0,1,0,1,1,0,0],		//14
		[1,1,1,0,1,0,1,1,0,0],		//15
	];
	var fillcolor = ["white","LightPink","fuchsia"];
	var psize = 20;

	function init() {
		canvas = document.getElementById("world");
		canvas.width = 800;
		canvas.height = 600;
		ctx = canvas.getContext('2d');
		ctx.font = "16px 'メイリオ'";
		for(id=0; id<16; id++){
			cx = (id % 8)*4+2;
			cy = Math.floor(id / 8)*6+2;
			movepiece(cx,cy,id);
		}
	}

	function movepiece(startx,starty,id){
		ctx.fillStyle = "Khaki";
		ctx.fillRect(startx*psize, starty*psize, psize-2, psize-2);
		ctx.fillStyle = "black";
		ctx.fillText(nametbl[id], starty*psize+2, starty*psize+16, 300);
		for(dir=0; dir<10; dir++){
			x = startx + x1[dir];
			y = starty + y1[dir];
			ctx.fillStyle = fillcolor[movtbl[id][dir]];
			ctx.fillRect(x*psize, y*psize, psize-2, psize-2);
		}
	}
//-->
</script></head><body onload="init()">
<canvas id="world"></canvas></body></html>

行動規範の内容に同意します

回答1件

ベストアンサー

JavaScript
1// ctx.fillText(nametbl[id], starty*psize+2, starty*psize+16, 300);
2//                              ↓
3   ctx.fillText(nametbl[id], startx*psize+2, starty*psize+16, 300);