HTML canvas fillRect() Method

วาดรูปสี่เหลี่ยมผืนผ้าขนาด 150*100 พิกเซล:

จาวาสคริปต์:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillRect(20, 20, 150, 100);

รองรับเบราว์เซอร์

ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่รองรับวิธีการนี้อย่างเต็มที่

Method
fillRect()	Yes	9.0	Yes	Yes	Yes

วิธีการ fillRect() วาดรูปสี่เหลี่ยมผืนผ้า "เติม" สีเริ่มต้นของการเติมเป็นสีดำ

เคล็ดลับ:ใช้ คุณสมบัติ fillStyleเพื่อกำหนดสี การไล่ระดับสี หรือรูปแบบที่ใช้ในการเติมรูปวาด

ไวยากรณ์ JavaScript:	บริบท .fillRect ( x,y,width,height );

Parameter	Description	Play it
x	The x-coordinate of the upper-left corner of the rectangle
y	The y-coordinate of the upper-left corner of the rectangle
width	The width of the rectangle, in pixels
height	The height of the rectangle, in pixels