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

Parameters
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.

Stroke
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"
context.stroke()

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

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

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

Comments

Post a Comment

Popular posts from this blog

What is 'this.' keyword in JavaScript

-
In JavaScript 'this' is an object and a reference to the current object that is used to get and to set properties of the current object. Take for instance within a function; const func = function (name){     this.name = name } func.name instance property name is set to that of the first argument; const inst = new func('duke') inst.name // returns duke You can as well extend func to set name using 'this'; func.prototype.set = function(name){     this.name = name } Running the previous instance with this set method; inst.set('John') // returns John
Read more

How to iterate array elements using 'for loop' in JavaScript

-
JavaScript arrays are similar to arrays in c and in c like programming languages such as php among others In JavaScript arrays are simply collections of elements for instance Objects Numbers or other Arrays Declaring an array An array may be declared using the array constructor for instance const array = new Array() or as const array = [] Iterating an array using 'for' loop This is the implest and most common method to iterate an array is by using the 'for loop' am sure you're familiar with the syntax. take for Instance you want to iterate an array of integers and print each one of them. var ints = [1, 2, 3, 4] To iterate ints using for loop. for (var i = 0; i < ints.length; i++){         console.log(ints[i]) } // output will be // 1 // 2 // 3 // 4 In between the parentheses they are three procedures in three segments separated by colons first segment declares var i an index which gets incriminated in the third segment as long as it's less
Read more