canvasでWebフォントを使う / magicien　

canvasでWebフォントを使う方法。

まず、Webフォントを適当な場所にアップロードして、CSSにWebフォントを定義する。

@font-face {
  font-family: 'Expressway';
  src: url('./font/Expressway.woff') format('woff');
}

次に、JavaScriptでCanvasのコンテキストのfontにCSSで定義したfont-family（例ではExpressway）を指定する。Webフォント未対応の場合のために、代替となるフォントファミリー（例ではsans-serif）も指定しておく。

function drawString(context2D) {
  context2D.font = "24px bold Expressway,sans-serif";
  context2D.textAlign = "left";
  context2D.textBaseline = "middle";
  context2D.fillStyle = "#000000"; // black
  context2D.strokeStyle = "#FFFFFF#; // white
  context2D.fillText( "Hello, WebGL!" , 100, 100 );
}

CSSの"format"には、woff（Web Open Font Format）の他に、truetype、svg等が使えるらしい。