How to use canvas context rect method for drawing rectangles

canvas context rect method does as it says. It's used for drawing a rectangle on a canvas context

context.rect(positionX, positionY,
Width, Height)

PositionX specifies the x coordinate at which the rectangle should be drawn at on the context

PositionY specifies the y coordinate at which the rectangle should be drawn at on the context

Width specifies the width of the rectangle

Height specifies the height of the rectangle

Stroking and filling the rectangle
In order for the rectangle to be actually visible you have to either stroke it or fill it with a color.

Stroking a rectangle means to draw a line that joins all of it's vertices
To specify the fill color you should set it and call stroke to draw
context.strokeStyle = "#colors"

Similar to srokings filling a rectangle means to paint it's inner bounding box with a specified color
context.fillStyle = "#colors"

context.rect(0, 0, 100, 100)
context.strokeStyle = "#eee"

Example 2
context.rect(0, 0, 100, 100)
context.fillStyle = "#eee"


Popular posts from this blog

How to create zip archives in nodejs

Open-graph meta data tags introdution

What is 'this.' keyword in JavaScript

How to get user's ip address in JavaScript

How to build a twitter retweet bot using JavaScript