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.