HTML canvas fillRect() method

Definition and usage

fillRect() Method to draw a 'filled' rectangle. The default fill color is black.

Hint:Please use fillStyle Properties are used to set the color, gradient, or pattern for filling the drawing.

Example

Draw a filled rectangle with 150*100 pixels:

Your browser does not support the HTML5 canvas tag.

JavaScript:

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

Kokeile itse

Syntaksi

context.fillRect(x,y,width,height);

Parametrien arvo

Parameteri Kuvaus
x Suorakulmion ylävasemman x-koordinaatti.
y Suorakulmion ylävasemman y-koordinaatti.
width Suorakulmion leveys, pisteinä.
height Suorakulmion korkeus, pisteinä.

Selaimen tuki

Taulukossa olevat numerot mainitsevat ensimmäisen täysin tukevan siihen ominaisuuden selaimen version.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Huomautus:Internet Explorer 8 ja aikaisemmat versiot eivät tue <canvas> elementtiä.