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 set content disposition header for nginx server to force content download

Animated daylight on HTML5 Canvas

How to make a static http server in nodejs using express

JS13K Preparation

Adding Gameover and introduction screen on HTML Canvas