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.

Javascript call method tutorial

Javascript’s call method looks really complicated but actually it is not as difficult as you think it is. Let takes a look at one example of how to use the javascript’s call method to show an alert box with greeting message!

Below example will show a greeting message after the web page has been loaded.

$(document).ready(function() {

function hello() {
  var hello = ['Good morning ', this.name, this.sayHello].join(' ');
  alert(hello);
}

var obj = {
  name: 'MR Noob', 
  sayHello: ', how are you today?'
};

hello.call(obj); 

});

The call method above takes one argument, which is the object that will be used in the alert method in hello function. As you can see the keyword this in the hello function will be replaced by the object after the call. That is basically what will happen when we passed an object into a call method of another object.

Let takes a look at another example, this time we will call the Computer function within the Laptop function and pass in the brand and price to the call method of the Computer function. What the below does is to show an alert box with the values we have passed in as well as using the origin property of the Laptop computer in the alert box.

jQuery(document).ready(function() {

	function Computer(brand, price) {
		
		var product_brand_price = ['I bought ', brand, ' which is made in ', this.origin, ' with $', price, '!'].join(' ');
		alert(product_brand_price);

	}

	function Laptop(brand, price) {
		this.origin = 'USA';
		Computer.call(this, brand, price);
	}

	var myPc = new Laptop("Dell", 3000);
});
Javascript call method
Javascript call method

There is one thing you need to take note of which is if you use the this keyword to represent the Computer object within the Computer object then this will no longer refer to the Laptop object anymore and thus if you call this.origin within that alert box then it will return an empty value because this will now represent the Computer object instead of the Laptop object and the Computer object does not have the origin property.

JavaScript Object tutorial

Javascript object consists of properties that are an association between a name (or key) and a value (which can either be a number, boolean or a method).

The universal javascript objects such as Strings, Arrays, Dates and etc are ready to be used in our program, for example we can create a new Date object to get the current year with below statements.

var date = new Date();
var year = date.getFullYear();

We can also create a custom made object and then call it’s method or return it’s value anytime we need to.

var Webserver = {

    brand : "xyz",
    loadtime : 0.5,
    price : 1.99,
    info : function() {

    	return this.brand + " loading time is " + this.loadtime + " sec, " + "and monthly price is " + this.price + " usd.";

    } 

};

//When we want to refer to that object within that object itself we will use the reserve keyword 'this'. 

alert(Webserver.info());

We can change the value of the above object as well to any value we like after we have created the object.

Webserver.price = 0.99;

Besides that, we can also create an empty object and then input the object’s properties later on.

var boy = new Object();
boy.haircolor = "Black";
boy.eyecolor = "brown";
boy.age = 10;

Another method to create a new javascript object is through creating the object template which I have talked about in my previous post.

do while loop javascript

The Javascript do while loop will run all the statements within the do while code block until the condition of the do while loop has been met. Here is an example of which the do while loop will run six times and shows the alert box six times before the loop terminates.

var i = 0;
do {
	alert("Hello World!");
	i++;
}while(i <= 5)

No matter what the above loop will at least run one time before it terminates. If you need to check the condition before the loop starts then I would suggest using the while loop or the for loop instead.

Which software do you need to create game graphics

There are lots of free and paid software around that we can use to create game graphic, I particular like these three softwares, Blender, Inkscape and GIMP. I use Blender to create 3D game graphic, use Inkscape to create 2D game graphic and use GIMP to draw simple graphic which I can then edit on Inkscape and Blender.

GIMP is pretty easy to master and you can start using it after a week of training, gimp is use more on photo editing job but creating simple graphic is also not bad at all.

Inkscape is use mainly in creating 2d game graphic, it has lots of features so it will take a while for a beginner to master it.

Inkscape trace

Blender is a powerful graphic creation software which we can use to create 2d, 3d as well as gaming landscape for our computer game. Blender creates graphic which is close to reality and is a must for game developer to get this tool and starts to create great product.

blender

Game creation takes time and lots of brain energy, if you are a game developer then you must good at both coding and graphic creation. Those three softwares above are just the beginning to your game development journey because as time goes by you might even need to learn autocad or other sophisticated computer graphic generation software which will cost money, therefore game developing business is not an easy business after all but it is fun when you see you game being plays by many users online! That just make you feel happy about it!

How to create object template for gaming character in Javascript?

Most javascript game developer nowadays likes to use object template to create a new object. What is an object template? Object template is just like a blueprint which we can later use to mass produce as many objects as we want from it. For example, we can create an object template of an enemy in our game.

var noobMonkey = {
	health: 100,
	shields: 50,
	strength: 100,
	strike: function() {
		// do something here
	}
};

Then we can create a new object based on this template like this…

var firstNoobMonkey = Object.create(noobMonkey);

We can even assign different property value to a different object like this…

firstNoobMonkey.strength = 50;

We can also go further to create a new property for a particular enemy at the time of it’s creation…

firstNoobMonkey.x = 30;
firstNoobMonkey.y = 30;

Template is always very useful when it comes to create a game object because of it’s “Build once and use it everywhere concept”.