HTML5 canvasで文字幅に合わせて拡大

質問

・HTML5 canvasで以下のようなことをやりたいのですが、可能でしょうか？
・もし可能ならどうやるのでしょうか？

■前提
・canvas設定。width10px
・canvas2Dオブジェクト取得
・文字「hogehoge」表示

■やりたいこと
・この時、テキスト内容の文字幅に応じて、表示幅を広げ、全てを表示させるためにはどうすれば良いでしょうか？

■分からないこと
・テキスト内容を全て表示させるためには、canvas2Dオブジェクトのwidthを変更するのでしょうか？
・それとも、canvasのwidth自体を変更するのでしょうか？
・canvasのwidthより、canvas2Dオブジェクトのwidthが大きかったらどうなるのでしょうか？

回答No.2

fujillin · ベストアンサー

＞canvasのwidthより、canvas2Dオブジェクトのwidthが大きかったらどうなるのでしょうか？
何もおきません。canvas2Dに概念上の制限はないはずなので、canvasの領域でトリミングされるだけです。

＞それとも、canvasのwidth自体を変更するのでしょうか？
描画してからcanvasのサイズを変更すると、座標の対応関係が変わるのでご質問の意図のようなことにはならないと思います。
無理やりやるなら、サイズを先にセットしてから再描画するか、canvas要素をoverflow:hiddenのDIVなどでラップしておいてそちらのサイズを変更することでコントロールするかでしょう。
canvasに描画した内容は図化されるので、サイズを調べたいのであれば、スクリプトでスキャンしてサイズを調べることになるでしょう。

でも、扱う対象がテキストであるのなら、そんな面倒なことをしなくても、HTMLのspan要素やdiv要素を利用した方が遥かに扱いが簡単だと思いますが・・・

お礼

回答ありがとうございました

＞何もおきません。canvas2Dに概念上の制限はないはずなので、canvasの領域でトリミングされるだけです
・参考になりました

＞扱う対象がテキストであるのなら、そんな面倒なことをしなくても、HTMLのspan要素やdiv要素を利用した方が遥かに扱いが簡単だと思いますが・・・
・アドバイスありがとうございましたー

回答No.1

noname#206842

width:10px　という意味がわからない！
１文字分がやっとでは？？？
autoにするか、文字サイズx文字数の幅+paddingのpx数　をとる必要があるのでは？？？
line-heightも必要になるとおもうけど？・・・

指定した領域外の表示はできない！
視覚的にはみえない！これをうまく利用する方法も考えられるが？・・・

お礼

回答ありがとうございましたー