[解決済み] HTML5 canvas ctx.fillTextで改行されない？

質問

テキストに "\n" が含まれる場合、キャンバスにテキストを追加することができないようです。つまり、改行が表示されない/機能しません。

ctxPaint.fillText("s  ome \n \\n <br/> thing", x, y);

上記のコードで描画されるのは "s ome \n <br/> thing" を、1行で描画します。

これはfillTextの制限なのか、私のやり方が悪いのか、"˶‾‾‾‾˶があり、印刷されないのですが、これもうまくいきません。

どうすれば解決しますか？

Canvasの制限と思われます。 fillText . 複数行のサポートはありません。さらに悪いことに、行の高さを測定する方法が組み込まれておらず、幅だけが測定されるため、自分で行うのはさらに難しくなります。

多くの人が独自の複数行サポートを書きましたが、おそらく最も注目すべきプロジェクトは Mozilla Skywriter .

必要なことの要点は、複数の fillText を複数回呼び出し、その都度テキストの高さをyの値に追加することです。(Mの幅を測るのは、skywriterの人がテキストを近似するためにやっていることだと思います)。