JavaScript | CanvasでSVGのpathを使う方法
JavaScriptのPath2D()コンストラクタを利用してCanvasでSVGのpathを使う方法を紹介しています。
CanvasでSVGのpathを使う
Path2D()コンストラクタを利用してCanvasでSVGのpathを使うサンプルコードになります。
See the Pen JavaScript Canvas change size by yochans (@yochans) on CodePen.
HTMLはcanvas要素にid=canvasを指定しています。
<canvas id="canvas"></canvas>新しいpathのデータを作成するにはnew Path2D()として引数にpathを記述します。
このPathはSVGと同じ記述で実行可能です。（fillなどの情報は入れられないので別途記述）
改行を含む複数行で記述したい場合は「｀（バッククォート）」で括れば大丈夫です。
サンプルではscale()でサイズを調節していますが、pathのサイズに合わせて拡縮します。
let canvas = document.querySelector('#canvas');
let context = canvas.getContext('2d');
//Heart
context.beginPath();
let path = new Path2D('M12 4.419c-2.826-5.695-11.999-4.064-11.999 3.27 0 7.27 9.903 10.938 11.999 15.311 2.096-4.373 12-8.041 12-15.311 0-7.327-9.17-8.972-12-3.27z');
context.fillStyle = 'hotpink';
context.scale(5, 5);
context.fill(path);