先日、HTML5 Canvas のサーバーサイド版である Node-Canvas を紹介しました：
Node.js から使えるサーバーサイド Canvas : node-canvas
HTML5 Canvas と互換性のある API を使って動的に Canvas 上に描画をします。実際には単に描画をするだけでなく、描画した内容を画像として取り出したりすることで、サーバー側の JavaScript で動的に画像ファイルを生成することができるようになり、とても便利なライブラリです。
実際に使っていて、１点問題気になることがありました。開発中は（日本語環境バッチリな）自分のマシンを使って動作テストなどを行うので気が付きにくいのですが、実際の本番サーバー上で動かした際にキャンバス上に描画した日本語文字列が化けてしまうケースを発見しました。
例えばこのようなコードを実行して、サーバーサイドで画像を動的に生成したとします：
このコードを Node.js で実行すると、./images/aaa.png というファイル名で動的に画像ファイルが生成されて保存されます。が、その時に生成される画像で「ハローワールド！」と明示されている文字列はサーバー実行環境によって正しく表示されたり、されなかったりします：
（正しく表示される場合）
（文字化けを起こす場合）
これはサーバー OS 側に日本語フォントが導入されているかどうかで決まります。特にクラウド環境においては OS は（デフォルトでは）英語版が用意されることが多く、そのまま利用しても日本語フォントが用意されていないため、「ハローワールド」という文字列を正しく描画できず、結果として文字化けを起こしてしまうことになります。
ということは、仮に文字化けを起こしても、OS に日本語フォントを導入した上でアプリケーションサーバーを再起動すれば回避できる、ということになります。
が、ここで問題が発生します。IBM Bluemix のような PaaS 環境の場合、OS 環境設定の自由度が低く、用意されたプラットフォームをカスタマイズして使うハードルが高くなります。現に SSH でログインすることはできますが apt-get などは使えません。またフォントファイルを後から無理やりコピーしてもアプリケーションサーバーを再起動するとそのファイルは消えてしまいます。このような自由度があまり高くないプラットフォーム上で日本語を正しく表示させることが結構難しかったりします。
そしてなんと更に、Node-Canvas の Issue ボードによると、この部分にはどうもバグがあるらしく、（2017/May/29 現在）ステータスが Open になっているので、まだ解決できていない模様でした：
https://github.com/Automattic/node-canvas/issues/783
・・・と、とても困った状況なのですが、結論から言うとなんとかアプリケーション側の工夫で回避することができました。まずは日本語フォントが必要になるので、フリーの日本語フォントを適当にダウンロードしてきます。例えば eFont プロジェクトから配布されているさざなみフォントの最新版を使うことにします。アーカイブファイル（*.tar.bz2）をダウンロード＆展開し、sazanami-***.ttf というファイルをアプリケーション内の fonts/ ディレクトリに格納しておきます：
（以下のコードではゴシックフォントしか使いませんが、とりあえず明朝フォントと合わせて展開しておきます）
そしてコードの該当部分を以下のように変更します：
これで実行すると、フォントが指定のものに強制指定され、日本語が化けずに表示できるようになります（下図は IBM Bluemix 環境下で実行した結果です）：
なお、上記の方法を使う場合、Ubuntu はこのままでも動くのですが、Mac OS X 環境においては Pango ライブラリを無効にした上で実行する必要があります。具体的には Node-Canvas を npm install した後で、node_modules/canvas/binding.gyp ファイルを編集し、15行目の値を 'false' にする（８行目と同じにする）作業を行い、再度 npm rebuild した上で node コマンドを実行する必要がありました。ご注意ください。
Node.js から使えるサーバーサイド Canvas : node-canvas
HTML5 Canvas と互換性のある API を使って動的に Canvas 上に描画をします。実際には単に描画をするだけでなく、描画した内容を画像として取り出したりすることで、サーバー側の JavaScript で動的に画像ファイルを生成することができるようになり、とても便利なライブラリです。
実際に使っていて、１点問題気になることがありました。開発中は（日本語環境バッチリな）自分のマシンを使って動作テストなどを行うので気が付きにくいのですが、実際の本番サーバー上で動かした際にキャンバス上に描画した日本語文字列が化けてしまうケースを発見しました。
例えばこのようなコードを実行して、サーバーサイドで画像を動的に生成したとします：
:
var fs = require( 'fs' );
var Canvas = require( 'canvas' ),
Image = Canvas.Image;
:
var canvas = new Canvas( 300, 300 );
var ctx = canvas.getContext( '2d' );
//. 赤い直線を１本描画する
ctx.beginPath();
ctx.moveTo( 100, 100 );
ctx.lineTo( 200, 200 );
ctx.strokeStyle = 'red';
ctx.stroke();
//. 文字列を表示する
ctx.fillText( 'ハローワールド！', 10, 30 );
//. 画像データをファイルにして保存する
var b64 = canvas.toDataURL().split( ',' )[1];
var buf = new Buffer( b64, 'base64' );
fs.writeFileSync( __dirname + '/images/aaa.png', buf );
:
このコードを Node.js で実行すると、./images/aaa.png というファイル名で動的に画像ファイルが生成されて保存されます。が、その時に生成される画像で「ハローワールド！」と明示されている文字列はサーバー実行環境によって正しく表示されたり、されなかったりします：
（正しく表示される場合）
（文字化けを起こす場合）
これはサーバー OS 側に日本語フォントが導入されているかどうかで決まります。特にクラウド環境においては OS は（デフォルトでは）英語版が用意されることが多く、そのまま利用しても日本語フォントが用意されていないため、「ハローワールド」という文字列を正しく描画できず、結果として文字化けを起こしてしまうことになります。
ということは、仮に文字化けを起こしても、OS に日本語フォントを導入した上でアプリケーションサーバーを再起動すれば回避できる、ということになります。
が、ここで問題が発生します。IBM Bluemix のような PaaS 環境の場合、OS 環境設定の自由度が低く、用意されたプラットフォームをカスタマイズして使うハードルが高くなります。現に SSH でログインすることはできますが apt-get などは使えません。またフォントファイルを後から無理やりコピーしてもアプリケーションサーバーを再起動するとそのファイルは消えてしまいます。このような自由度があまり高くないプラットフォーム上で日本語を正しく表示させることが結構難しかったりします。
そしてなんと更に、Node-Canvas の Issue ボードによると、この部分にはどうもバグがあるらしく、（2017/May/29 現在）ステータスが Open になっているので、まだ解決できていない模様でした：
https://github.com/Automattic/node-canvas/issues/783
・・・と、とても困った状況なのですが、結論から言うとなんとかアプリケーション側の工夫で回避することができました。まずは日本語フォントが必要になるので、フリーの日本語フォントを適当にダウンロードしてきます。例えば eFont プロジェクトから配布されているさざなみフォントの最新版を使うことにします。アーカイブファイル（*.tar.bz2）をダウンロード＆展開し、sazanami-***.ttf というファイルをアプリケーション内の fonts/ ディレクトリに格納しておきます：
（以下のコードではゴシックフォントしか使いませんが、とりあえず明朝フォントと合わせて展開しておきます）
そしてコードの該当部分を以下のように変更します：
:
var fs = require( 'fs' );
var Canvas = require( 'canvas' ),
Image = Canvas.Image;
:
var canvas = new Canvas( 300, 300 );
var ctx = canvas.getContext( '2d' );
//. 赤い直線を１本描画する
ctx.beginPath();
ctx.moveTo( 100, 100 );
ctx.lineTo( 200, 200 );
ctx.strokeStyle = 'red';
ctx.stroke();
//. フォントを強制指定する
var Font = Canvas.Font;
var myFont = new Font( 'myFont', 'fonts/sazanami-gothic.ttf' );
ctx.addFont( myFont );
ctx.font = '20px myFont';
//. 文字列を表示する
ctx.fillText( 'ハローワールド！', 10, 30 );
//. 画像データをファイルにして保存する
var b64 = canvas.toDataURL().split( ',' )[1];
var buf = new Buffer( b64, 'base64' );
fs.writeFileSync( __dirname + '/images/aaa.png', buf );
:
これで実行すると、フォントが指定のものに強制指定され、日本語が化けずに表示できるようになります（下図は IBM Bluemix 環境下で実行した結果です）：
なお、上記の方法を使う場合、Ubuntu はこのままでも動くのですが、Mac OS X 環境においては Pango ライブラリを無効にした上で実行する必要があります。具体的には Node-Canvas を npm install した後で、node_modules/canvas/binding.gyp ファイルを編集し、15行目の値を 'false' にする（８行目と同じにする）作業を行い、再度 npm rebuild した上で node コマンドを実行する必要がありました。ご注意ください。
