HTML5キャンバスにテキストをフィットさせるには？

Question

私はそうのように別々のキャンバスに、いくつかのテキストをレンダリングしようとしています：

var tmpCanvas = document.createElement("canvas"); 
var tmpContext = tmpCanvas.getContext('2d'); 
tmpContext.textAlign = 'center'; 
tmpContext.font = size + 'px'; 
tmpCanvas.width = tmpContext.measureText(txt).width; 
tmpCanvas.height = size; 
tmpContext.fillStyle = "#000"; 
tmpContext.fillRect(0, 0, tmpCanvas.width, tmpCanvas.height); 
tmpContext.fillStyle = color; 
tmpContext.fillText(txt, tmpCanvas.width/2, tmpCanvas.height/2); 

このキャンバスは、メインキャンバスの中心にレンダリングされます。私はこれをやっている

context.drawImage(cachedText, (d_canvas.width/2) - (cachedText.width/2), (d_canvas.height/2) - (cachedText.width/2), cachedText.width, cachedText.height); 

、テキスト理由描かれているのはかなり複雑なので、私は描画操作を何度も繰り返したくはありません。しかし、問題は、キャンバスサイズをテキストサイズと同じに設定したにもかかわらず、テキストがキャンバスよりも小さく、中心にないことです。上記のように、キャンバス/イメージオブジェクトの上にレンダリングされたテキストを作成するにはどうすればよいですか？ここで

は、問題を説明するためのフィドルです：http://jsfiddle.net/x4t1vjam/

Answer 1

だから、それは結局のところ、あなたのコードを持ついくつかの問題がありました。まず第一に、キャンバス上でフォントサイズを設定するときは、フォントタイプも設定する必要があります。私の例では、フォントは一般的な「serif」フォントとして設定されています。

第2に、描画コードが変わった順番になっているため、フォントサイズを使用してキャンバスの幅を設定した後で、フォントを描画する前にオーバーライドされていました。

最後に、位置決めロジックが間違っています。私はそれを直すために最善を尽くしましたが、いくつかの調整が必要です。あなたはそれを見ることができますほとんどここに働いて、

http://jsfiddle.net/x4t1vjam/5/

コードは、おそらく二度、それらを宣言避けるために、以前のコード内の変数の値の一部を格納し、クリーンアップが必要になります。コードサンプルなしで回答を投稿することはできないので、ここで私の変更を行ったところです。

tmpContext.textAlign = 'center'; 
    tmpContext.font = size + "px serif"; 
    tmpCanvas.width = tmpContext.measureText(txt).width; 
    tmpCanvas.height = size; 
    tmpContext.fillStyle = "#000"; 
    tmpContext.fillRect(0, 0, tmpCanvas.width, tmpCanvas.height); 
    tmpContext.fillStyle = color; 
    tmpContext.font = "100px serif"; 
    tmpContext.fillText(txt, (tmpCanvas.width/2) - tmpContext.measureText(txt).width/2, 
         size);