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.shadowColor = 'rgba(144, 145, 148, 1.0)'; //assign the color of shadow
context.shadowOffsetX = 1; 
context.shadowOffsetY = 1;
context.shadowBlur = 1;
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:-

HTML5 Star

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;
var radius = 150;

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.

circle

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++)
	alert(array1[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.

Show alert with javascript prototype

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() {
	alert("Hello World!")
}

helloWorld.prototype.helloAgain = function(name) {
					alert("Hello " + 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.

hello world

hello john

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.

html5 canvas drawing

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.shadowOffsetX = 1;
context.shadowOffsetY = 1;
context.shadowBlur = 1;
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.shadowOffsetX = 2;
	context.shadowOffsetY = 2;
	context.shadowBlur = 4;
	context.lineWidth = 20;
	context.lineCap = 'round';
	context.beginPath();
	context.moveTo(150, 130);
	context.quadraticCurveTo(225, 200, 300, 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.

html5 effect

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)
{
  alert("small boy");
}
else if (age < 50)
{
  alert("young man");
}
else
{
  alert("old man");
}

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++)
{
   alert("Hi");
}

The below alert box will continue to show as long as the condition is true.

while (true)
{
   alert("hey");
}

The above while loop will run forever until the computer is running out of resources and the browser will be forced to shut down.

JavaScript switch statement

The javascript switch statement is used to perform different action based on condition. Below is an example of the switch statement.

switch(n)
{
    case 1:
      	//run code block 1
      	break;
    case 2:
      	//run code block 2
      	break;
    case 3:
	//run code block 3
      	break;
    default:
	//if n is different from case 1, 2 and 3 then run the code under the default case
}

The break keyword is very important because if we do not use the break keyword then the code will continue on the next case automatically. If the n value is not in any of the 1, 2 or 3 case then the code under the default case will be called. One more thing we need to know here is that the switch statement does not take value other than number so make sure you only pass in the number.