CanvasRenderingContext2D: lineWidth プロパティ

CanvasRenderingContext2D.lineWidth はキャンバス 2D API のプロパティで、線の太さを設定します。

メモ: 線は stroke()strokeRect()strokeText() メソッドで描画することができます。

線の幅を座標空間単位で指定した数値。 0、負、InfinityNaN の値は無視されます。この値は既定では 1.0 です.

線の幅の変更

この例では線の太さ 15 単位を使用して線と長方形を描画します。

HTML

html
<canvas id="canvas"></canvas>

JavaScript

js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.lineWidth = 15;

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(130, 130);
ctx.rect(40, 40, 70, 70);
ctx.stroke();

結果

それ以外の例

このプロパティに関するそれ以外の例と説明については、スタイルと色の適用キャンバスチュートリアル内)を参照してください。

仕様書

Specification
HTML Standard
# dom-context-2d-linewidth-dev

ブラウザーの互換性

BCD tables only load in the browser

関連情報