JavaScript | CanvasでSVGのpathを使う方法

JavaScript Canvas 2D,JavaScript

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);