canvas要素に矩形(長方形)を描画する

canvas要素に矩形(長方形)を描画するには、context.rectまたはcontext.fillRectまたはcontext.strokeRectメソッドを使用します。

canvas要素で扱う図形は基本的に塗りつぶす場合はcontext.fill、輪郭線を描く場合はcontext.strokeを使用しますが、矩形(長方形)のみ専用のメソッドが用意されています。

構文

引数

引数名 説明
x
必須
number X座標
y
必須
number Y座標
width
必須
number 横幅
height
必須
number 高さ

サンプルコード

HTML

JavaScript

デモ

左から輪郭線、塗りつぶしのデモです。

JavaScript逆引きリファレンス一覧へ戻る