Fill a rectangle in JavaScript

Description

The following code shows how to fill a rectangle.

Example


<!DOCTYPE HTML>
<html>
<body>
<canvas id="canvas" width="500" height="540"></canvas>
<script>
var ctx = document.getElementById("canvas").getContext("2d");
ctx.fillRect(10, 10, 100, 100);<!--from ww w.  j  a va 2s.com-->
ctx.strokeRect(30, 30, 200, 200);
</script>
</body>
</html>

Click to view the demo

The code above generates the following result.

Home »
  Javascript Tutorial »
    Canvas »
      Canvas Shape

Fill a rectangle in JavaScript

Paint a cloud by using bezier curve in Java...
Set line join style in JavaScript
Set linecap on HTML5 canvas in JavaScript
Show Control points for Cubic Bezier Curves...
Use solid color to fill a triangle in JavaS...