JavaScript»キャンバス»lineToで多角形を描く パスをつかって図形をぬりつぶす

ファイル名: js-canvas/quest_00065.html

下のソースコードをうつして、キャンバスに図のような三角形をかいてみましょう。

ソースコード

const canvas = document.getElementById("triangle");
const context = canvas.getContext("2d");

context.fillStyle = "rgb(255, 182, 193)";

context.beginPath();
context.moveTo(160, 100);
context.lineTo(80, 200);
context.lineTo(240, 200);
context.closePath();
context.fill();

解説

closePathは、つながっていないパスをすべて、直線でつないでくれます。