Cssを使って文字の位置を自由に操作する

css-text.png

<style>
#htmltext{ 
position:absolute;
top:25px;
left:10px;
font:24px Arial;
color: rgba(165, 217, 221, 1.0); 
}</style>
<script type='text/javascript' >
function main(){
var textCanvas = document.getElementById("textCanvas");
textCanvas.style.backgroundColor = 'rgba(83, 62, 37, 0.6)';
}
</script>
<body onload="main()">
<canvas id="textCanvas" width="150" height="150">
</canvas>
<text id="htmltext">Hello World</text>
</body>

やり方としては、html側のコードに文字列を書いて、idを振って
そのidの位置をcssで操作するというもの。
top,leftで文字の位置を指定します。
なので、指定した位置は文字の先頭の左上になります

サポートサイト Wikidot.com