HTML5 Canvas

References

W3Schools JavaScript Canvas Object

Introduction

One of the handiest HTML tags which was introduced in HTML5 is the <canvas> tag.

Please NOTE that the <canvas> tag is an HTML tag.

But the magic that happens in the <canvas> tag is done with JavaScript code.

Sample Code

Before you can use the JavaScript Canvas Object methods and properties, you need to add an HTML <canvas> tag to your page.

Following is a sample page with several <canvas> tags in it. This is page canvasSample2.html. Please note that there are three <canvas> tags in this page:

You can see the sample page running in a browser here.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Canvas Sample</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="canvasStyles.css" media="screen">
</head>

<body>
  <div id="mainDiv">
    <header>
      <h3>A Sample Canvas</h3>
    </header>
    
    <section>
      <h4>Here is the first canvas tag:</h4>
      <canvas id='theCanvas'></canvas>
      
      <h4>Here is the second canvas tag:</h4>
      <!--<h5>(This is a fake power meter at 75%)</h5>-->
      <canvas id='theCanvas2'></canvas>
      
      <h4>Here is the third canvas tag:</h4>
      <canvas id='theCanvas3'></canvas>
    </section>
    
    <br><br>
    <footer>
      © 2019
    </footer>
  </div>
  
  <script>
    var c = document.getElementById('theCanvas');
    var ctx1 = c.getContext("2d");
    ctx1.fillStyle = "#FF0000";
    ctx1.fillRect(20, 20, 150, 100);
    ctx1.rect(40, 40, 150, 100);
    ctx1.lineWidth = 10;
    ctx1.strokeStyle = "#0000FF";
    ctx1.stroke();  
    
    var c2 = document.getElementById('theCanvas2');
    var canvasRatio = c2.height / c2.width;
    console.log("canvasRatio is " + canvasRatio);
    var cwidth = 600;
    var cheight = cwidth * canvasRatio;
    c2.width = cwidth;
    c2.height = cheight;
    var ctx2 = c2.getContext("2d");
    ctx2.beginPath();
    ctx2.moveTo(20,20);
    ctx2.lineTo(580, 280);
    ctx2.stroke();
    
    ctx2.beginPath();
    ctx2.moveTo(20, 280);
    ctx2.lineTo(580, 20);
    ctx2.lineWidth = 10;
    ctx2.strokeStyle = "#0000FF";
    ctx2.stroke();  
    
    var c3 = document.getElementById('theCanvas3');
    var ctx3 = c3.getContext("2d");
    ctx3.font = "30px Arial";
    ctx3.fillText("Hello World", 10, 50);    
    ctx3.strokeText("Big smile!", 10, 100);
  </script>

</body>
</html>

And here is the stylesheet. This is file canvasStyles.css:

body 
{
  font-family: Arial, sans-serif;
}

canvas
{
  border: 1px solid black;
}

#mainDiv
{
  width: 50%;
  margin: 0 auto;
  border: 1px solid gray;
  border-radius: 2em;
  padding: 2em;
}

Please note these points about the above page's JavaScript code:

The first JavaScript statement gets an object and stores it in variable c. The object is obtained by using the built-in method getElementById(). The object that is stored in variable c represents a <canvas> tag.
The canvas object is now used to get something called a "drawing context" for that <canvas> tag. You need a context in order to use the canvas's built-in methods to draw things on the canvas. The context that is obtained in this code is a 2-dimensional drawing object.
The context object is used in the third statement to create a color "fill" style, which is somewhat like a brush dipped in that color. In this code the color is bright red.
The fill style is then used to create a rectangle and to fill it with the color red. The first two arguments in the ctx1.fillRect() call are the x and y coordinates of the point in the context which defines the upper left corner of the rectangle. The next two arguments are the width and height of the rectangle.
A second rectangle is drawn into the first canvas using the rect() method.
Now a second canvas is used to create a canvas object, create a drawing context, and to draw some lines.
Please NOTE that this second canvas is resized to be bigger than the default size. (The default size is 300px by 150px.)
And now a third canvas is used to create a canvas object, create a drawing context, and to draw some text.

Richland College Multimedia Learning Center

HTML5 Canvas

References

Introduction

Sample Code