Mastering HTML Canvas Graphics

Introduction

The HTML <canvas> tag is used to draw graphics and other visual elements on a web page. This tag provides a platform for developers to create games, images, and animations using JavaScript. The canvas element comes with various attributes that allow you to manipulate the size, opacity, and appearance of the canvas.

In this lab, we will explore how to use the <canvas> tag in HTML to create graphics, add animations, and manipulate shapes and text using JavaScript.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/MultimediaandGraphicsGroup(["`Multimedia and Graphics`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/MultimediaandGraphicsGroup -.-> html/multimedia("`Multimedia Elements`") subgraph Lab Skills html/basic_elems -.-> lab-70719{{"`HTML Graphic Drawing`"}} html/head_elems -.-> lab-70719{{"`HTML Graphic Drawing`"}} html/multimedia -.-> lab-70719{{"`HTML Graphic Drawing`"}} end

Creating a Simple Canvas

Let's create a simple canvas by using the <canvas> tag without any content. In the index.html file, write the following code:

<!doctype html>
<html>
  <head>
    <title>Simple Canvas</title>
  </head>

  <body>
    <canvas id="myCanvas"></canvas>
  </body>
</html>

Save the file and open it in your browser. You will notice a blank area on the page, which is our canvas with a default width of 300px and a height of 150px.

Adding Styles to the Canvas

We can add styles to our canvas using the style attribute. Let's add a border to our canvas to make its boundaries visible.

<!doctype html>
<html>
  <head>
    <title>Styled Canvas</title>
  </head>

  <body>
    <canvas id="myCanvas" style="border: 1px solid black;"></canvas>
  </body>
</html>

Save the file and refresh your browser to see the result.

Creating Shapes on Canvas

Now let's add some graphics to our canvas. To do this, we need to use JavaScript. We can use the getContext() method to get a 2D drawing context of our canvas and perform various operations on it.

<!doctype html>
<html>
  <head>
    <title>Shapes on Canvas</title>
  </head>

  <body>
    <canvas id="myCanvas" style="border: 1px solid black;"></canvas>
    <script>
      const canvas = document.getElementById("myCanvas");
      const ctx = canvas.getContext("2d");

      // Draw a rectangle
      ctx.fillStyle = "red";
      ctx.fillRect(50, 50, 100, 50);
    </script>
  </body>
</html>

In the above code, we first get the canvas element by its ID myCanvas, and then we get a 2D drawing context by using getContext(). We then set the fillStyle property to "red" to fill the rectangle with a red color. Finally, we draw the rectangle by using the fillRect() method.

Save the file and refresh your browser to see the result.

Adding Text to Canvas

Let's add some text to our canvas using JavaScript.

<!doctype html>
<html>
  <head>
    <title>Text on Canvas</title>
  </head>

  <body>
    <canvas id="myCanvas" style="border: 1px solid black;"></canvas>
    <script>
      const canvas = document.getElementById("myCanvas");
      const ctx = canvas.getContext("2d");

      // Add text
      ctx.font = "30px Arial";
      ctx.fillStyle = "blue";
      ctx.fillText("Hello World", 50, 100);
    </script>
  </body>
</html>

In the above code, we first get the canvas element by its ID myCanvas, and then we get a 2D drawing context by using getContext(). We then set the font property to "30px Arial" and fillStyle property to "blue". Finally, we add the text "Hello World" using the fillText() method.

Save the file and refresh your browser to see the result.

Animating Graphics on Canvas

We can also create animations on the canvas using JavaScript and the HTML <canvas> tag. Let's create a moving rectangle animation on our canvas.

<!doctype html>
<html>
  <head>
    <title>Animated Canvas</title>
  </head>

  <body>
    <canvas id="myCanvas" style="border: 1px solid black;"></canvas>
    <script>
      const canvas = document.getElementById("myCanvas");
      const ctx = canvas.getContext("2d");

      let x = 20;
      let y = 20;
      const dx = 5;

      function animate() {
        requestAnimationFrame(animate);
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = "red";
        ctx.fillRect(x, y, 50, 50);

        if (x + 50 > canvas.width || x < 0) {
          dx = -dx;
        }

        x += dx;
      }

      animate();
    </script>
  </body>
</html>

In the above code, we first get the canvas element by its ID myCanvas, and then we get a 2D drawing context by using getContext(). We then declare some variables x and y to hold the position of our rectangle. We also declare dx variable to move the rectangle along the x axis.

We then create a function animate() to draw the rectangle on the screen. We use the clearRect() method to clear the previous drawings on the canvas on each frame. We then fill the rectangle with a red color using the fillRect() method.

We then check if the rectangle has reached the boundaries of the canvas, and if so, we change the direction of the movement by changing the value of dx.

Finally, we call the requestAnimationFrame() method to create a loop for animation.

Save the file and refresh your browser to see the animated rectangle.

Summary

In this lab, we learned how to use the HTML <canvas> tag to create graphics and animations on a web page. We also learned how to manipulate the size, opacity, and appearance of the canvas using attributes and styles. We added shapes, text, and animations on the canvas by using JavaScript and getContext() method.