canvasタグの使い方

2026年5月16日

canvasタグはJavaScriptで操作します。

<body onload="draw();">
    <canvas id="canvas" width="xxx" height="xxx"></canvas>
</body>

function draw() {
    let canvas = document.querySelector("#canvas");
    if (canvas.getContext) {
        let ctx = canvas.getContext("2d");

        // 描画
    }
}

ctx.fillRect(x, y, width, height); // 矩形塗りつぶし
ctx.strokeRect(x, y, width, height); // 矩形輪郭
ctx.clearRect(x, y, width, height); // 矩形削除

beginPath()→新規パス作成
パスメソッドでパス描画
closePath()→パスを閉じる
stroke()→パスの輪郭をなぞる
fill()→パスを塗りつぶす

function draw() {
    let canvas = document.querySelector("#canvas");
    if (canvas.getContext) {
        let ctx = canvas.getContext("2d");

        // 描画
        beginPath();
        moveTo(75, 50); // ペンを移動
        lineTo(100, 75); // パスを描画
        lineTo(100, 25);  // パスを描画
        fill();  // パスを閉じて、塗りつぶし
    }
}

arc(x, y, radius, startAngle, endAngle, counterclockwise);
arcTo(x1, y1, x2, y2, radius);
quadraticCurveTo(cp1x, cp1y, x, y); // 2次ベジェ曲線
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y); // 3次ベジェ曲線

Path2D
SVGパス

独学でプログラミングを学習している方で、エラーなどが発生して効率よく勉強ができないと悩む方は多いはず。Udemyは、プロの講師が動画で実際のプログラムを動かしながら教えてくれるオンライン講座です。講座の価格は、セール期間中には専門書籍を1冊買うよりも安く済むことが多いです。新しく学びたいプログラミング言語がある方は、ぜひUdemyでオンライン講座を探してみてください。

canvasタグの使い方

関連記事