CanvasRenderingContext2D: lineWidth プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

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

値

線の幅を座標空間単位で指定した数値。 0、負、Infinity、NaN の値は無視されます。この値は既定では 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

関連情報