Canvas Text

canvas-text.png

<script type='text/javascript' >
function main(){
var textCanvas = document.getElementById("textCanvas");
textCanvas.style.backgroundColor = 'rgba(83, 62, 37, 0.6)';
var ctx = textCanvas.getContext("2d");
ctx.font = "24px Arial";
ctx.fillStyle = "#A5D9DD";
ctx.fillText("Hello World", 10, 25);//文字,x,y
}
</script>
<body onload="main()">
<canvas id="textCanvas" width="150" height="150">
</canvas>
</body>

文字の位置

ctx.fillText("Hello World", 10, 25);//文字,x,y

で指定する(x,y,)座標は、文字の先頭の左下座標になります

text

サポートサイト Wikidot.com text