Senduran's Blog: May 2020

With ECMAScript6 (ES6) JavaScript got new syntax. Followings are some of the new syntax.

Arrow Functions

New syntax for defining a function

Traditional Function	ES6 Arrow Function
function myFunction() { ... }	const myFunction = () => { ... }
function myFunction(name) { ... }	const myFunction = (name) => { ... } also without parenthesis if only one argument const myFunction = name => { ... }
function add(n, m) { return n+m; }	const add = (n, m) => n+m; if a single line return then the return keyword and the curly brackets can be omitted

Spread Operator

Used to split up array elements OR object properties

const newArray = [...oldArray, 1, 2];


const newObject = {...oldObject, newProerty:newValue}

newArray is a one dimensional array contains all the elements in oldArray and additionally 1, 2

newObject has all the properties of oldObject in addition to the it has newProperty

(if the oldObject already has newProperty it will be overwritten)

Spread operator is useful when copying an array or an object.

Rest Operator

Used to merge a list of function arguments into an array

function sortArgs(...args) {
       return args.sort();
}

Destructuring

Easily extract array elements or object properties and store them in variables

Array Destructuring

[a, b] =  ["Hello", "World"]
console.log(a) // Hello
console.log(b) // World

Object Destructuring

{name} = {"name": "Aang", "age" : 112}
console.log(name) // Aang
console.log(age) // undefined

A circle can be drawn in the Canvas element using the arc function.
For example

<html>
    <body>
        <canvas id="drawArea" width="1024" height="768"></canvas>
    </body>

    <script>
        var canvas = document.getElementById("drawArea");
        var canvasContext = canvas.getContext("2d");

        canvasContext.fillStyle = "black";
        canvasContext.beginPath();
        canvasContext.arc(100, 100, 50, 0, Math.PI*2, true);
        canvasContext.fill();
    </script>
</html>

Lets explore the arc function's parameters

arc(x-coordinate, y-coordinate, radius, start-angle, end-angle, [counter-clockwise])

x-coordinate : position x from the top left corner of the canvas area

y-coordinate : position y from the top left corner of the canvas area

radius : radius of the arc

start-angle : the angle(in Radian) where the arc should begin. The canvas angle is always measured in the clockwise starting from 0.

i.e in a clock, 3 represent 0

6 --> 𝝅/2 (90 degree )

9 --> 𝝅 (180 degree)

12 --> 3𝝅/2 (270 degree)

end-angle: the angle where the arc should end

counter-clockwise : optional parameter. To draw the arc from the start-angle end- angle in the counter clockwise, default value is false (i. by default it is clock wise)

drawing a circle is straight forward, start angle is 0 and end angle is 2𝝅 or (360 degree). but when drawing a half circle we have two option whether to draw the upper half or lower half.

Drawing an upper half circle

canvasContext.arc(100, 100, 50, 0, Math.PI, true)

here the begin angle is set to zero and end to 180 degree( we can imagine from 3 to 9 in a clock) these two can be connected either via 6 or 12, since the counter-clockwise parameter is set to true an arc is drawn from 3 to 9 via 12 so it is a upper half circle.

Drawing a lower half circle

Simply changing the counter-clockwise parameter to false, the arc will be drawn from 3 to 9 via 6 (clockwise)

Let's see how to draw a quarter circle

If we try to draw a quarter circle similar to the above approach by giving a 90 degrees, i.e

canvasContext.arc(100, 100, 50, 0, Math.PI/2, false)

This will draw a segment of circle rather than quarter sector. This is because the arc function will connect the points specified by the angle begin and angle end parameter.

That is from the start angle (3'O clock) to end angle (6'O clock)an arc is drawn (end to start because of the counter clockwise is true)

So to draw a quarter circle, we have to draw two lines, those are connecting the start angle and end angle position towards the center of the circle

First the position is moved to the center and a line is drawn to the starting angle position then the arc is drawn and from the ending position another line is drawn towards the center.

canvasContext.fillStyle="black";

canvasContext.beginPath();
canvasContext.moveTo(100,100);
canvasContext.lineTo(150,100);
canvasContext.arc(100, 100, 50, 0, Math.PI/2, false);
canvasContext.lineTo(100, 100);
canvasContext.fill();

Drawing without filling will be like this

canvasContext.storeStyle="black";
canvasContext.beginPath();
canvasContext.moveTo(100,100);
canvasContext.lineTo(150,100);
canvasContext.arc(100, 100, 50, 0, Math.PI/2, false);
canvasContext.lineTo(100, 100);
canvasContext.stroke();

Senduran's Blog

Sunday, May 17, 2020

JavaScript Arrow Function, Spread & Rest Operators And Destructuring Syntax

Arrow Functions

Spread Operator

Rest Operator

Destructuring

Sunday, May 3, 2020

How to draw a quarter circle in HTML Canvas