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

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

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

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

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

No.2 ベストアンサー 回答者： fujillin 回答日時： 2014/04/09 14:14

＞canvasのwidthより、canvas2Dオブジェクトのwidthが大きかったらどうなるのでしょうか？

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

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

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

この回答へのお礼

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

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

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

お礼日時：2014/04/19 20:54

No.1 回答者： nanden1548 回答日時： 2014/04/09 12:55

width:10px　という意味がわからない！

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

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

この回答へのお礼

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

お礼日時：2014/04/19 20:51