How to multiply two numbers with javascript function?

Javascript function is often used to carry out multiple tasks ranging from showing alert box to changing the inner html value of a webpage. Below code will create a function which will multiply two numbers passed into it and showing the result trough the alert box!

```multiply(3, 4);
function multiply(a, b)
{
var factor = a * b;
}
```

In order to use the above javascript multiply function all we need to do is to pass two numbers into that function and it will carry out it’s job accordingly.

How to detect the browser keydown event with javascript?

Here is how you can detect the browser keydown event and saved that keycode to an array.

```//record keyevents
document.onkeydown = function(e){
e = e?e:window.event;
keyPressList[e.keyCode] = true;
};
```

We use the document’s onkeydown listener to listen for the keydown event on our web browser with the above code.

How to create a star on html5 canvas with canvas api?

This article will show you how to create a star on html5 canvas with the canvas api. Basically what we need here is a whole bunch of points for us to plot the star and then we will loop through those points and connect them together with line.

```var context = document.getElementById('canvas').getContext('2d');
context.strokeStyle = 'yellow'; //assign line color to yellow color
context.lineWidth = 3; //set line width
context.lineCap = 'round';

//the points we need to plot the star
var array1 = [[326,248],[328,248],[331,248],[333,247],[336,246],[339,245],[344,243],[351,240],[359,237],[369,232],[379,227],[401,217],[413,211],[428,204],[441,197],[456,189],[471,183],[488,178],[523,169],[561,160],[577,156],[590,153],[613,147],[623,145],[630,143],[642,140],[650,138],[654,138],[656,137],[655,138],[654,138],[653,139],[652,139],[652,140],[650,141],[649,142],[646,144],[644,146],[642,148],[640,150],[637,153],[633,158],[626,164],[621,168],[616,172],[607,181],[598,191],[587,204],[567,228],[553,244],[539,262],[523,279],[510,296],[497,313],[484,330],[474,345],[464,357],[455,369],[446,379],[441,386],[430,399],[424,406],[419,412],[416,415],[416,417],[416,415],[416,408],[416,388],[416,380],[416,363],[416,344],[415,311],[415,286],[414,261],[410,236],[406,214],[402,194],[397,175],[394,156],[392,137],[392,121],[392,109],[392,98],[392,85],[392,78],[392,72],[392,70],[392,71],[395,77],[405,92],[414,106],[424,120],[434,132],[444,143],[454,156],[465,166],[475,173],[484,182],[497,192],[509,203],[522,213],[537,223],[549,234],[562,244],[580,260],[590,272],[602,287],[611,299],[619,310],[626,319],[632,326],[635,330],[638,334],[640,336],[639,336],[635,335],[629,333],[614,327],[600,323],[584,317],[570,312],[557,308],[547,304],[540,301],[531,297],[524,295],[516,291],[509,289],[503,288],[495,284],[486,283],[479,281],[471,279],[462,277],[458,276],[452,275],[447,273],[442,273],[435,271],[431,271],[426,270],[420,268],[412,266],[408,265],[401,262],[397,261],[393,259],[389,257],[386,257],[382,256],[378,254],[374,254],[369,253],[365,252],[361,252],[358,251],[355,250],[352,250],[348,249],[347,249],[346,248],[345,248],[344,248],[343,248],[342,248],[341,248],[339,247],[335,246],[332,246],[330,246]];

//start drawing star
context.beginPath();
context.moveTo(324,248);
for (var i = 0; i <array1.length; i++) {
context.lineTo(array1[i][0],array1[i][1]);
context.stroke();
}
context.closePath();
```

The final outcome is as follow:-

How to draw circle on html5 canvas

Drawing circle on HTML5 canvas is relatively simple. We just need to define the radius and the center point of the circle then we can start to draw circle with the canvas’s context object.

```var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
// center point of the circle is at the center of canvas
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'blue';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
```

The outcome of the above program is as follows.

How to loop through the javascript array with the for loop

Suppose you have created a javascript array and need to loop through all the elements within that array then the best method to use will be either the for or the while loop. In this article we will use the for loop.

```var array1 = ["hello", "this", "world"];
for(var i=0; i<array1.length; i++)
```

The above program will loop through the javascript’s array with the for loop and shows the alert box in every passes of the loop.

Every object in javascript has the prototype property which we can attach a new function or property to it. Below javascript program will show two alert boxes once you have loaded the webpage.

```function helloWorld() {
}

helloWorld.prototype.helloAgain = function(name) {
}

var helloTwice = new helloWorld();

helloTwice.helloAgain("John");
```

We first create a function named helloWorld then we added another function (which will show the name of a person) to helloWorld’s prototype. Next we create an object which owns all the properties of helloWorld then pass in the name of a person which will be used by the helloAgain function. The “Hello World!” alert will show first follows by the second alert in the helloAgain function.

Show alert with javascript prototype program is super simple, isn’t it?

How to draw a cup on the HTML5 canvas with javascript

In this tutorial I am going to show you how to draw a cup on HTML5 canvas with javascript. First of all lets take a look at the finish product.

In order to draw the above cup we need lots of points to plot, therefore I would suggest you to collect the points using Bear Draws, which is a painting software creates with javascript. After you have gathered all the points that you needed, then all will become a textbook stuff by just filling in the blank. Below is the entire javascript program which creates the drawing above.

```(function() {

var context = document.getElementById('canvas').getContext('2d');
context.strokeStyle = 'black';
context.shadowColor = 'rgba(144, 145, 148, 1.0)';
context.lineWidth = 3;
context.lineCap = 'round';

var array1 = [[286,266],[286,265],[286,263],[286,261],[286,258],[286,256],[287,254],[289,252],[289,250],[291,247],[292,245],[293,242],[296,238],[298,235],[301,233],[303,229],[307,226],[310,223],[314,219],[317,217],[321,214],[326,211],[330,209],[334,206],[338,203],[342,201],[347,198],[350,196],[357,194],[364,191],[370,189],[377,187],[384,185],[389,184],[392,184],[399,182],[406,181],[411,179],[417,179],[423,178],[429,177],[436,176],[442,176],[448,176],[457,176],[465,176],[471,176],[478,176],[485,177],[492,179],[498,180],[503,181],[509,182],[516,184],[522,185],[530,187],[538,188],[545,190],[550,193],[556,196],[563,198],[567,201],[573,204],[577,207],[580,209],[583,211],[585,214],[586,216],[588,217],[589,219],[591,221],[591,223],[592,225],[594,227],[595,229],[596,231],[597,234],[597,236],[597,239],[597,242],[597,245],[597,247],[597,249],[597,252],[597,255],[597,258],[596,261],[594,265],[593,269],[591,272],[588,277],[585,280],[583,284],[580,287],[578,290],[576,292],[573,294],[571,296],[569,297],[566,299],[562,301],[560,302],[558,304],[554,304],[550,306],[546,308],[542,309],[537,310],[534,310],[531,311],[528,312],[524,313],[517,315],[510,316],[504,317],[499,318],[494,319],[490,319],[487,320],[483,320],[480,320],[476,321],[471,321],[467,321],[463,321],[459,321],[454,321],[448,321],[443,321],[437,321],[432,321],[428,321],[424,321],[418,321],[413,321],[406,321],[402,321],[395,321],[390,321],[383,321],[378,321],[372,321],[368,321],[364,321],[361,321],[358,321],[355,321],[353,320],[351,320],[350,320],[350,319],[348,319],[346,319],[345,319],[344,318],[342,317],[341,317],[340,317],[339,316],[338,315],[336,315],[334,314],[333,313],[332,313],[330,313],[330,312],[329,311],[328,311],[326,310],[325,309],[323,308],[323,307],[321,306],[320,305],[319,304],[319,303],[317,302],[316,301],[314,300],[314,299],[313,298],[313,297],[311,296],[311,295],[310,294],[309,294],[309,293],[308,293],[308,291],[307,290],[306,290],[305,289],[303,286],[302,286],[301,284],[300,283],[298,281],[297,280],[297,279],[296,278],[295,277],[294,276],[294,275],[293,275],[292,274],[292,273],[291,272],[291,271],[290,271],[290,270],[290,268],[289,267],[288,266],[288,265],[288,264],[288,262],[287,261],[286,260],[285,259],[285,258],[284,258],[283,257]];

context.beginPath();
context.moveTo(287,267);
for (var i = 0; i <array1.length; i++) {
context.lineTo(array1[i][0],array1[i][1]);
context.stroke();
}
context.closePath();

var array2 = [[359,225],[361,224],[367,220],[369,219],[372,217],[380,214],[383,212],[388,210],[391,210],[394,208],[396,207],[399,206],[401,206],[403,205],[405,204],[407,204],[409,203],[410,203],[412,202],[414,202],[418,201],[419,201],[420,201],[422,201],[424,200],[426,200],[427,200],[429,200],[433,200],[435,200],[437,200],[439,200],[441,200],[444,200],[449,200],[452,200],[454,200],[458,200],[460,200],[462,200],[465,200],[468,201],[472,202],[475,202],[476,203],[479,203],[481,204],[484,204],[491,206],[496,207],[499,207],[503,208],[504,209],[506,209],[509,209],[509,210],[510,211],[512,211],[512,212],[514,213],[515,213],[519,215],[521,218],[523,218],[524,221],[525,222],[531,234],[531,241],[531,242],[531,243],[531,244],[531,247],[529,248],[529,249],[528,251],[527,252],[526,253],[526,254],[524,256],[522,257],[522,258],[520,260],[518,261],[518,262],[514,263],[512,265],[507,267],[505,268],[501,268],[496,269],[494,270],[492,270],[488,270],[483,271],[480,272],[474,273],[471,274],[465,275],[462,276],[455,277],[452,277],[449,277],[443,277],[436,277],[432,277],[423,277],[414,277],[410,277],[406,277],[400,277],[394,277],[388,277],[383,276],[380,275],[378,275],[366,270],[364,268],[363,267],[361,263],[360,262],[358,259],[357,255],[356,254],[356,251],[355,249],[355,247],[355,244],[355,243],[355,241],[355,237],[355,234],[355,231],[355,229],[355,227],[355,225],[355,224],[355,223],[356,222]
];

context.beginPath();
context.moveTo(358,226);
for (var i = 0; i <array2.length; i++) {
context.lineTo(array2[i][0],array2[i][1]);
context.stroke();
}
context.closePath();

var array3 = [[283,253],[283,264],[283,274],[283,281],[283,285],[283,291],[283,296],[283,302],[284,308],[284,312],[284,316],[284,321],[285,324],[286,331],[286,333],[296,357],[297,361],[298,364],[300,369],[301,373],[301,375],[302,379],[304,384],[304,388],[305,392],[306,396],[307,399],[307,401],[308,403],[308,406],[309,407],[310,409],[310,412],[312,413],[312,416],[314,420],[314,424],[314,425],[314,426],[315,426],[315,428],[316,428],[317,429],[318,430],[320,430],[322,431],[322,432],[323,432],[337,434],[346,438],[356,439],[366,442],[379,444],[390,446],[413,447],[432,449],[448,449],[463,449],[482,449],[487,449],[501,449],[506,449],[511,449],[521,449],[527,449],[531,449],[534,448],[542,446],[547,444],[553,442],[554,441],[561,438],[564,437],[567,435],[571,433],[573,431],[584,424],[585,423],[586,422],[588,421],[589,419],[590,416],[591,414],[591,410],[593,407],[594,402],[595,397],[597,392],[597,387],[597,382],[599,376],[599,372],[599,368],[601,363],[602,359],[602,355],[603,351],[604,346],[604,342],[604,333],[604,328],[605,322],[606,316],[607,314],[607,313],[608,303],[609,299],[610,296],[610,287],[610,284],[610,281],[610,279],[610,276],[610,273],[609,268],[609,267],[609,265],[609,260],[609,258],[609,256],[608,254],[608,253],[607,250],[606,248],[606,247],[606,246],[604,244],[604,243],[603,241],[603,240],[603,238],[601,236],[601,234],[599,232],[599,231],[598,230],[598,229]];

context.beginPath();
context.moveTo(283,251);
for (var i = 0; i <array3.length; i++) {
context.lineTo(array3[i][0],array3[i][1]);
context.stroke();
}
context.closePath();

var array4 =[[598,227],[603,223],[608,221],[613,218],[618,215],[639,213],[650,213],[655,213],[658,214],[660,215],[665,216],[669,220],[675,223],[681,228],[686,231],[692,235],[697,240],[701,246],[703,248],[706,255],[708,262],[709,268],[709,275],[711,288],[711,294],[711,299],[710,303],[709,306],[707,310],[706,313],[704,317],[702,320],[700,323],[699,326],[697,328],[695,330],[694,332],[691,333],[688,335],[686,336],[678,339],[676,339],[674,339],[669,340],[663,341],[660,341],[657,341],[655,341],[651,341],[649,341],[647,341],[645,341],[643,341],[641,340],[640,340],[637,338],[624,332],[622,329],[617,327],[613,325],[612,325],[611,324],[610,323],[610,322],[609,322]];

context.beginPath();
context.moveTo(599,228);
for (var i = 0; i <array4.length; i++) {
context.lineTo(array4[i][0],array4[i][1]);
context.stroke();
}
context.closePath();

var array5 = [[603,255],[607,253],[608,252],[610,250],[612,249],[617,247],[619,247],[621,247],[624,247],[626,247],[628,247],[630,247],[634,247],[636,247],[638,248],[641,249],[644,251],[649,255],[652,258],[657,270],[659,277],[660,280],[661,283],[661,288],[661,290],[661,293],[661,295],[661,296],[660,297],[658,298],[655,300],[653,302],[651,303],[647,304],[646,305],[645,305],[643,305],[641,305],[639,305],[637,305],[635,305],[633,304],[632,304],[632,303],[631,303],[629,302],[625,299],[623,298],[621,297],[620,296],[618,296],[617,295],[616,295],[615,295],[614,294],[613,293],[612,293],[611,291],[611,290],[611,282],[610,278],[610,276],[609,275],[608,274],[608,273],[607,272],[606,271],[605,271],[604,269],[604,266],[603,266],[603,262],[603,259],[603,258],[604,257],[604,256]];

context.beginPath();
context.moveTo(603,256);
for (var i = 0; i <array5.length; i++) {
context.lineTo(array5[i][0],array5[i][1]);
context.stroke();
}
context.closePath();

var array6 = [[385,233],[389,231],[391,230],[394,228],[396,227],[400,226],[404,224],[405,224],[407,223],[411,222],[415,221],[426,218],[427,218],[429,218],[432,218],[434,218],[436,218],[438,218],[440,218],[441,218],[444,218],[446,218],[463,218],[464,219],[465,219],[467,219],[469,220],[473,220],[477,220],[478,222],[482,223],[484,224],[486,225],[490,232],[490,236],[491,240],[491,242],[491,244],[491,246],[491,248],[489,250],[487,250],[484,251],[480,252],[466,255],[465,255],[460,255],[458,256],[457,257],[455,257],[453,257],[451,257],[449,257],[444,257],[435,257],[430,257],[428,257],[426,257],[422,257],[418,257],[414,257],[410,257],[409,257],[407,256],[405,255],[404,254],[402,253],[399,251],[397,250],[395,248],[394,248],[394,246],[393,245],[391,242],[390,241],[389,239],[388,238],[387,237],[387,236],[387,235],[386,235],[384,234],[384,233],[381,232]];

context.beginPath();
context.moveTo(384,233);
for (var i = 0; i <array6.length; i++) {
context.lineTo(array6[i][0],array6[i][1]);
context.stroke();
}
context.closePath();

})();
```

As you can see now, the points that you have collected will be grouped into a few arrays. Then we just draw the points on the canvas.

Don’t forget to include the canvas tag on your html5 file.

```<canvas id='canvas' width='960' height='500'>
Canvas not supported
</canvas>
```

It is easy to draw the cup with canvas’s api after you have all the points ready.

How to create a smile with context.quadraticCurveTo api

In this article I am going to show you how to use the context.quadraticCurveTo api to create a smile on the html5 canvas. We need a control point, a starting point and the end point to draw the smile as shown below the article.

```(function() {
var context = document.getElementById('canvas').getContext('2d');
context.fillStyle = 'cornflowerblue';
context.strokeStyle = 'yellow';
context.shadowColor = 'rgba(144, 145, 148, 1.0)';
context.lineWidth = 20;
context.lineCap = 'round';
context.beginPath();
context.moveTo(150, 130);
context.stroke();
})();
```

Don’t forget to include the canvas tag on the html5 page with the id=”canvas” assigned to it. The js code above will create the smile below.

JavaScript if else statement

Here is how the javascript’s if else statement looks like.

```if (condition)
{
//run this code if condition is true
}
else
{
//else run this code if the first condition is not true
}
```

Here is an example of how to use the if else statement.

```if (age < 12)
{
}
else if (age < 50)
{
}
else
{
}
```

As you can see from the example above if the first condition is true then the code within the first if block will run and the rest of the if block will be skipped. Else if the second condition is true then the second code block will run instead and finally the third code block will run if both the first and second if statements are false.

Javascript for and while loop

Javascript for loop has the following syntax.

```for (statement 1; statement 2; statement 3) {
the code block
}
```

Statement number 1 is where we will initiate a value before the loop starts. Statement 2 defines the condition for running the loop. Statement 3 is where we increase the initial value. In below example we will show the alert function 10 times with the for loop.

```for (var i=0; i<10; i++)
{
```while (true)