<Previous Lesson> [Table of Contents] <Next Lesson>
In the previous lesson, you have learned how to write JavaScript code to draw straight lines on a canvas. In this lesson, we shall learn more advanced skills in creating graphics using JavaScript.
32.1 Drawing a Rectangle with Solid Color
We can draw a rectangle and fill it with a certain color using the fillRect() method. The default color is black. The fillRect() method contains four parameters, as follows:
fillRect(x,y,w,h)
x= The x-coordinate of the upper-left corner of the rectangle
y= the y-coordinate of the upper-left corner of the rectangle
w=the width of the rectangle,(in pixels)
h=The height of the rectangle(in pixels)
The following script draws a rectangle with black color.
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> </canvas><br><br> <input type="button" Value="Draw Rectangle" Onclick="DrawRect()"> <script> function DrawRect() { var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillRect(20,20,150,100); } </script>
The Output
To fill the rectangle with a different color, use the fillStyle property, as follows:
ctx.fillStyle =color
The following script will fill the rectangle with blue color.
<script> function DrawRect1() { var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle ="blue" ctx.fillRect(20,20,150,100); } </script>
The Output
32.2 Drawing a Rectangle with Color in Gradient
We use the createLinearGradient() method creates a linear gradient style to fill an object such as a rectangle. It can also be used for other objects such as circles, lines, and text.
The createLinearGradient() method comprises four parameters:
createLinearGradient(x1,y1,x2,y2)
x1=the x-coordinate of the start point of the gradient
y1=the y-coordinate of the start point of the gradient
x2=the x-coordinate of the end point of the gradient
y2=the y-coordinate of the end point of the gradient
Further, we need to use addColorStop() method to specify different colors, and where to position the colors in the gradient object.
The following function draws a rectangle and creates a gradient comprises the blue and cyan color.
function DrawRect() { var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var my_gradient=ctx.createLinearGradient(0,0,0,170); my_gradient.addColorStop(0,"blue"); my_gradient.addColorStop(1,"cyan"); ctx.fillStyle=my_gradient; ctx.fillRect(20,20,150,100); }
The Output