HTML5 Canvas Reference - fillRect()

fillRect(x,y,width,height) draws a filled rectangle at position x,y for width and height.

To change the default color we can assign the fillStyle property to a color, gradient, or pattern.

Browser compatibility


`fillRect()`	Yes	Yes	Yes	Yes	Yes

JavaScript syntax

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

Parameter Values

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

Example

The following code shows how to use fillRect(x, y, width, height) from canvas context.


<!DOCTYPE html>
<html>
<body>
<canvas id='canvas'></canvas>
<script type='text/javascript'>
    var ctx = document.getElementById('canvas').getContext('2d');
    var x = 0, y = 0, side = 10;
    ctx.fillRect(x, y, side, side);<!--from  w ww. j av  a  2  s  .c  o m-->

</script>
</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to create Bifurcation Diagram.


<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" style='background-color:#EEE;' width='500px' height='200px'/>
<script type='text/javascript'>
    var canvas= document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    w = canvas.width,<!--from  ww w.  ja  v  a  2 s.  co m-->
    h = canvas.height,
    st = 2 / w,
    fx = function (x1, r) {
       return r * x1 * (1 - x1);
    },
    it = function (r) {
        var idx = 0,
            x = 0.5,
            xc = w * ((r - 2) / 2);
        while (idx++ < 2000) {
            x = fx(x, r);
            ctx.fillRect(xc, h - (x * h), 1, 1);
        }
    };
    ctx.fillStyle = "black";
    for (r = 2; r < 4; r += st) {
        (function (r1) {
            setTimeout(function () {
                it(r1);
            }, 0);
        })(r);
    } 

</script>
</body>
</html>

The code above is rendered as follows:

Example 3

The following code shows how to create Checked Pattern.


<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" style='background-color:#EEE;' width='500px' height='200px'/>
<script type='text/javascript'>
    var canvas= document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    for (x = 0; x < 10; x++) {<!--   w ww .j  a  v a  2s.  c  o  m-->
        for (y = 0; y < 10; y++) {
            ctx.fillStyle = "#FFF|#333".split('|')[(x + y) % 2];
            ctx.fillRect(x * 50, y * 50, 50, 50);
        }
    }

</script>
</body>
</html>

The code above is rendered as follows:

Example 4

The following code shows how to create Horizontal Vertical Layout.


<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" style='background-color:#EEE;' width='500px' height='200px'/>
<script type='text/javascript'>
    var canvas= document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
<!-- w  w  w .ja  va 2 s .com-->
    var context = canvas.getContext('2d');
    var object1 = {x:0, y:0, width: 25, height: 25, color: "red" };
    var object2 = {x:0, y:0, width: 25, height: 25, color: "blue" };
    var nextX = 10;
    var nextY = 10;
    var padding = 5;
    // horizontal layout
    for (var i = 0; i < 5; i++){

        context.fillStyle = object1.color;
        context.fillRect (nextX,nextY,object1.width,object1.height);
        //update next x position
        nextX += object1.width + padding;
    }
    // reset x,y values for next demo
    nextX = 10;
    nextY = 40;

    for (var i = 0; i < 5; i++){
        context.fillStyle = object2.color;
        context.fillRect (nextX,nextY,object2.width,object2.height);
        nextY += object1.height + padding;
    }

</script>
</body>
</html>

The code above is rendered as follows:

Example 5

The following code shows how to draw a ring with rectangle.


<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" style='background-color:#EEE;' width='500px' height='200px'/>
<script type='text/javascript'>
    var canvas= document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
<!--  w  w w  . j a v  a2 s .c o m-->
    function plot(x,y){
      ctx.fillRect(x,y,1,1);
    }
    for(var i=0;i<3000;++i) {
        var r = 80,R = 120, _r=Math.random()*(R*R-r*r)+r*r;
        _r=Math.sqrt(_r);
        var theta = Math.random()*2*Math.PI;
        plot(200+_r*Math.cos(theta),40+_r*Math.sin(theta)/4);
    }
</script>
</body>
</html>

The code above is rendered as follows: