JavaScript»キャンバス»四角のわく線を描くstrokeRect 四角のわく線をかいてみる

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

下のソースコードをうつして、キャンバスに図のような四角の枠線わくせんをかいてみましょう。

ソースコード

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

context.lineWidth = 3;
context.strokeStyle = "rgb(255, 0, 0)";
context.strokeRect(40, 80, 240, 50);

解説

lineWidthで線の太さがきまります。「四角形をかいてみる」等のソースコードと見くらべて、どこがちがうのか確認かくにんしましょう。