Section 1: Understanding the Canvas

The first step to the creation of our HTML5 game is to understand where its problems lie. It is a client-side graphics <canvas>. The canvas element renders simple graphics, such as line art, graphs, and other custom graphical elements on the client-side.
Introduced in the summer of 2004 by Apple in its Safari Browser, Canvas is now supported by many browsers. While Internet Explorer does not directly support the tag as of yet, there are JavaScript Libraries that emulate <canvas> syntax using Microsoft's Vector Markup Language (VML). From a markup point of view, you simply put the element in the page, name it with an id attribute, and define its dimensions with height and width attributes:
  1. <canvas id="canvas" width="300" height="300">
  2. <strong>Canvas Supporting Browser Required</strong>
  3. </canvas>
After you place a <canvas> tag in a document, your next step is to use JavaScript to access and draw on the element. For example, the following fetch the object by its id value and creates a two-dimensional drawing context:
  1. var canvas = document.getElementById("canvas");
  2. var context = canvas.getContext("2d");
Once we have drawing objects for a game we have various methods used for the Canvas but we are focused on a few methods. For example, the "strokeRect(x,y,width,height)" method takes x and y coordinates and height and width, all specified as numbers representing pixels.
For example:
context.strokeRect(10,10,150,50);
Will draw a simple rectangle of 150 pixels by 50 pixels starting at the coordinates 10,10 from the origin of the placed <canvas> tag.
If you wanted to set a particular color for the stroke then you might set it with the "strokeStyle()" method, like so:
  1. context.strokeStyle = "blue";
  2. context.strokeRect(10,10,150,50);
You can use the "fillRect(x,y,width,height)" method to make a rectangle, but this time in a solid manner:
context.fillRect(150,30,75,75);
By default, the fill color will be black, but you can define a different fill color using the "fillColor()" method.
For example:
context.fillStyle = "#da0000";
Also, use standard CSS color functions, which may include opacity.
For example, the opacity of the reddish fill is set to 40 percent:
context.fillStyle = "rgba(218,112,214,0.4)"; Now:
HTML1.jpg
Code used
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>HTML5 canvas example</title>
  6. <script type="text/javascript">
  7. window.onload = function () {
  8. var canvas = document.getElementById("canvas");
  9. var context = canvas.getContext("2d");
  10. context.strokeStyle = "orange";
  11. context.strokeRect(10, 10, 150, 50);
  12. context.fillStyle = "rgba(218,0,0,0.4)";
  13. context.fillRect(150, 30, 75, 75);
  14. }
  15. </script>
  16. </head>
  17. <body>
  18. <h1>
  19. Simple Canvas Examples</h1>
  20. <canvas id="canvas" width="300" height="300">
  21. <strong>Canvas Supporting Browser Required</strong>
  22. </canvas>
  23. </body>
  24. </html>
2. Save
HTML2.jpg
3. Run
HTML3.jpg

Section 2: Drawing and Styling Lines and Shapes

HTML5 defines a complete API for drawing on a Canvas element. For example, to do some more complex shapes, the path API must be used. Now the question is, what is the Path API?

What the path API is?

The path API stores a collection of subpaths formed by various shape functions and connects the subpaths via a "fill()" or "stroke()" call. To begin a path, "context.beginPath()" is called to reset the path collection. Then, any variety of shape calls can occur to add a subpath to the collection. Once all subpaths are properly added, "context.closePath()" can optionally be called to close the loop. Then "fill()" or "stroke()" will also display the path as a newly created shape.
For example, the following draws a V shape using "lineTo()":
  1. context.beginPath();
  2. context.lineTo(20,100);
  3. context.lineTo(120,300);
  4. context.lineTo(220,100);
  5. context.stroke();
If you were to add a "context.closePath()" before "context.stroke()", the V shape would turn into a triangle, because closePath() would connect the last point and the first point. Also, by calling "fill()" instead of "stroke()", the triangle will be filled in with whatever the fill color is, or black if none is specified. Of course, you can call both "fill()" and "stroke()" on any drawn shape if you want to have a stroke around a filled region. Thus, to style the drawing, you can specify the Fill Style and Stroke Style and maybe even define the width of the line using line width, see the following:
  1. context.strokeStyle = "blue";
  2. context.fillStyle = "red";
  3. context.lineWidth = 10;
  4. context.beginPath();
  5. context.lineTo(200,10);
  6. context.lineTo(200,50);
  7. context.lineTo(380,10);
  8. context.closePath();
  9. context.stroke();
  10. context.fill();
You can change the color by setting the fillColor property. In addition to the CSS color values, you can also set the fillColor to a gradient object. A gradient object can be created using "createLinearGradient()" or "createRadialGradient()". The following example creates a simple linear gradient that will be applied to a rectangle using the "createLinearGradient(x1,y1,x2,y2)" method. The gradient is positioned at 10,150 and is set to go 200 pixels in both directions.
var lg = context.createLinearGradient(10,150,200,200);
Next, the gradient colors are added using the "addColorStop()" method. This specifies a color and the offset position in the gradient where the color should occur. The offset must be between 0 and 1.
  1. lg.addColorStop(0,"#B03060");
  2. lg.addColorStop(0.75,"#4169E1");
  3. lg.addColorStop(1,"#FFE4E1");
Of course, you could use the rgba CSS function to create a gradient with transparency as well. Finally, the fillColor is set to the gradient. Here is the complete code snippet, followed by a visual example:
  1. var lg = context.createLinearGradient(10,150,200,200);
  2. lg.addColorStop(0,"#B03060");
  3. lg.addColorStop(0.5,"#4169E1");
  4. lg.addColorStop(1,"#FFE4E1");
  5. context.fillStyle = lg;
  6. context.beginPath();
  7. context.rect(10,150,200,200);
  8. context.fill();
To create a radial gradient using "createRadialGradient(x1,y1,r1,x2,y2,r2)", you must set the position and radius of two circles to serve as the gradient.
For example:
  1. var rg = context.createRadialGradient(350,300,80,360,250,80);
  2. rg.addColorStop(0,"#A7D30C");
  3. rg.addColorStop(0.9,"#019F62");
  4. rg.addColorStop(1,"rgba(1,159,98,0) ");
  5. context.fillStyle = rg;
  6. context.beginPath();
  7. context.fillRect(250,150,200,200);
Consider this entire example:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>HTML5 canvas lines and shapes example</title>
  6. <script type="text/javascript">
  7. window.onload = function () {
  8. var canvas = document.getElementById("canvas");
  9. var context = canvas.getContext("2d");
  10. context.strokeStyle = "blue";
  11. context.fillStyle = "red";
  12. context.lineWidth = 10;
  13. context.beginPath();
  14. context.lineTo(200, 10);
  15. context.lineTo(200, 50);
  16. context.lineTo(380, 10);
  17. context.closePath();
  18. context.stroke();
  19. context.fill();
  20. var lg = context.createLinearGradient(10, 150, 200, 200);
  21. lg.addColorStop(0, "#B03060");
  22. lg.addColorStop(0.5, "#4169E1");
  23. lg.addColorStop(1, "#FFE4E1");
  24. context.fillStyle = lg;
  25. context.beginPath();
  26. context.rect(10, 150, 200, 200);
  27. context.fill();
  28. var rg = context.createRadialGradient(50, 50, 10, 60, 60, 50);
  29. rg.addColorStop(0, "#A7D30C");
  30. rg.addColorStop(0.9, "#019F62");
  31. rg.addColorStop(1, "rgba(1,159,98,0)");
  32. context.fillStyle = rg;
  33. context.beginPath();
  34. context.fillRect(0, 0, 130, 230);
  35. context.beginPath();
  36. context.lineTo(250, 150);
  37. context.lineTo(330, 240);
  38. context.lineTo(410, 150);
  39. context.stroke();
  40. }
  41. </script>
  42. </head>
  43. <body>
  44. <h1>
  45. Simple Shapes on canvas Example</h1>
  46. <canvas id="canvas" width="500" height="500">
  47. <strong>Canvas Supporting Browser Required</strong>
  48. </canvas>
  49. </body>
  50. </html>
HTML4.jpg
Save
HTML5.jpg
Run
HTML6.jpg

Section 3: Canvas Perspective

The context is specified as 2d, everything we see seems like 2d. Now we create a 3d perspective by the proper use of points, using nothing more than several "moveTo()" and "lineTo()" calls. The "lineTo()" call creates three sides of the cube, but the points set are not straight horizontal and vertical lines as we see when we make 2D squares. Shading is applied to give the illusion of dimensionality because of the application of a light source.
Let us consider the new canvas code for the 3d perspective:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>Canvas Cube Example</title>
  6. <style type="text/css" media="screen">
  7. body
  8. {
  9. background-color: #E67B34;
  10. }
  11. </style>
  12. <script type="text/javascript">
  13. window.onload = function () {
  14. var context = document.getElementById("canvas").getContext("2d");
  15. context.fillStyle = "#fff";
  16. context.strokeStyle = "black";
  17. context.beginPath();
  18. context.moveTo(188, 38);
  19. context.lineTo(59, 124);
  20. context.lineTo(212, 197);
  21. context.lineTo(341, 111);
  22. context.lineTo(188, 38);
  23. context.closePath();
  24. context.fill();
  25. context.stroke();
  26. context.fillStyle = "#ccc";
  27. context.strokeStyle = "black";
  28. context.beginPath();
  29. context.moveTo(341, 111);
  30. context.lineTo(212, 197);
  31. context.lineTo(212, 362);
  32. context.lineTo(341, 276);
  33. context.lineTo(341, 111);
  34. context.closePath();
  35. context.fill();
  36. context.stroke();
  37. context.fillStyle = "#999";
  38. context.strokeStyle = "black";
  39. context.beginPath();
  40. context.moveTo(59, 289);
  41. context.lineTo(59, 124);
  42. context.lineTo(212, 197);
  43. context.lineTo(212, 362);
  44. context.lineTo(59, 289);
  45. context.closePath();
  46. context.fill();
  47. context.stroke();
  48. }
  49. </script>
  50. </head>
  51. <body>
  52. <h1>
  53. Canvas Perspective</h1>
  54. <canvas id="canvas" width="400" height="400">
  55. <strong>Canvas Supporting Browser Required</strong>
  56. </canvas>
  57. </body>
  58. </html>
Step 1
HTML7.jpg
Save
HTML8.jpg
Run
HTML9.jpg

Section 4: Now learn about Arcs & Curves

Drawing on a canvas isn't limited to simple lines; it is also possible to create curved lines using "arc()", "arcTo()", "quadraticCurveTo()", and "bezierCurveTo()". Use the "arc(x,y,radius,startAngle,endAngle,counterclockwise)" method to draw circles and parts of circles. Its location is defined by the point of its center(x,y) as well as the circle's radius. The circle is drawn by the startAngle & endAngle in radians. The direction of the curve is set by a Boolean value, which is the final parameter specified by counterclockwise. If it is set to true then the curve will move counterclockwise; otherwise, it will move clockwise.
Now for a very interesting example.
To start your face drawing, use "arc()" to draw the head as a circle:
context.arc(150,150,100,0,Math.PI*2,true);
Use the "quadraticCurveTo(cpx,cpy,x,y)" method to draw the nose and the mouth.
This function starts at the last point in the path and draws a line to (x,y). The control point (cpx,cpy) pulls the line in that direction, resulting in a curved line. Call "moveTo()" first to set the last point in the path. Look at the following.
A line was drawn from (155,130) to (155,155). Because the x-coordinate of the control point (130,145) is to the left, the line is pulled in that direction. Because the y-coordinate is between the y-coordinates, the pull is roughly in the middle.
  1. context.moveTo(155,130);
  2. context.quadraticCurveTo(130,145,155,155);
  3. context.moveTo(100,175);
  4. context.quadraticCurveTo(150,250,200,175);
You call "bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)" to draw the eyes. This function is similar to quadraticCurveTo() except that it has two control points and has a line that is pulled toward both of them.
  1. context.moveTo(80,110);
  2. context.bezierCurveTo(95,85,115,85,130,110);
  3. context.moveTo(170,110);
  4. context.bezierCurveTo(185,85,205,85,220,110);
Lastly, use "arcTo(x1,y1,x2,y2,radius)" to draw a frame around the face.
Time to see the final program example here. Feel excited. Canvas is a power of HTML 5.
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>Canvas Face Example</title>
  6. <script type="text/javascript">
  7. window.onload = function () {
  8. var canvas = document.getElementById("canvas");
  9. var context = canvas.getContext("2d");
  10. context.strokeStyle = "black";
  11. context.lineWidth = 5;
  12. /* create a frame for our drawing */
  13. context.beginPath();
  14. context.fillStyle = "blue";
  15. context.moveTo(50, 20);
  16. context.arcTo(280, 20, 280, 280, 30);
  17. context.arcTo(280, 280, 20, 280, 30);
  18. context.arcTo(20, 280, 20, 20, 30);
  19. context.arcTo(20, 20, 280, 20, 30);
  20. context.stroke();
  21. context.fill();
  22. /* draw circle for head */
  23. context.beginPath();
  24. context.fillStyle = "yellow";
  25. context.arc(150, 150, 100, 0, Math.PI * 2, true);
  26. context.fill();
  27. /* draw the eyes, nose and mouth */
  28. context.beginPath();
  29. context.moveTo(80, 110);
  30. context.bezierCurveTo(95, 85, 115, 85, 130, 110);
  31. context.moveTo(170, 110);
  32. context.bezierCurveTo(185, 85, 205, 85, 220, 110);
  33. context.moveTo(155, 130);
  34. context.quadraticCurveTo(130, 145, 155, 155);
  35. context.moveTo(100, 175);
  36. context.quadraticCurveTo(150, 250, 200, 175);
  37. context.moveTo(50, 20);
  38. context.stroke();
  39. }
  40. </script>
  41. </head>
  42. <body>
  43. <h1>
  44. Smile you're on canvas</h1>
  45. <canvas id="canvas" width="300" height="300">
  46. <strong>Canvas Supporting Browser Required</strong>
  47. </canvas>
  48. </body>
  49. </html>
Open Notepad and write this code piece
HTML10.jpg
Then save this code
HTML11.jpg
Run
html9