canvas要素のテキストの文字間を広げる #JavaScript

このテキストを広げてあげたい。

CSSのletter-spacingを当ててあげる

canvas要素にletter-spacingを当ててあげると
canvasで描画されたテキストにも適応される

こんな感じに広がってくれます。

letter-spacingにアニメーションを当ててみる

CSS Animationでletter-spacingプロパティをいじってあげると動きます。
用途がかなり限られると思いますが…

また、js側でfontを指定してあげるのとcanvasを都度更新してあげないとCSS Animationは適応されませんでした…

function render(){
  stage.clear();
  c.textAlign = 'center';
  c.font = '24px "Fjalla One"'; // <= フォントの指定をしてあげないとCSS Animationが効きませんでした。
  c.fillStyle = '#59bb0c';
  c.fillText('HELLO Qiita',200,00);
  rendering = requestAnimationFrame(render);// あとcanvasの描画を更新も
}

正直使いどころがないと思いますが、ちょっと面白かったので記事を書いてみました。