In this article, we will learn an HTML5 tag used to build Graphic graphics that is the Canvas tag.

For example, if you want to draw a geometric diagram, we must use an image file. But with Canvas, you can completely draw yourself.

1. What is HTML5 Canvas?

Canvas is an HTML5 tag similar to other HTML tags, but the most obvious difference is that the content of Canvas is built from Javascript. To use Canvas, you must place the <canvas></canvas> tag at the position you want to display, then use the APIs that HTML5 provides to manipulate the objects inside the Canvas (line, circle, . ..).

When using Canvas you must understand the difference between the elements of the Canvas and its content. The Canvas element is just an ordinary HTML tag, but its content is a collection of objects that make up a Graphic.

When displayed in the browser, the Canvas will display as a png image.

 <canvas id="myCanvas" width="578" height="200"></canvas> <script> // Lấy thẻ HTML Canvas var canvas = document.getElementById('myCanvas'); // Vẽ ở mô hình 2D var context = canvas.getContext('2d'); // Thiết lập font chữ và màu context.font = '40pt Calibri'; context.fillStyle = 'blue'; // vẽ một đoạn text tại vị trí 150px 100px context.fillText('Hello World!', 150, 100); </script>

Run up you will see a text " Hello World! ", try to black it out, okay? Absolutely not because it is an Object displayed as an image, so you can only save it as a png file, not a text anymore.

2. Conclusion

Because this is the first article to start a series of learning about Canvas tags in HTML5, I don't go into how to handle it, but only introduce the concept of what Canvas is and some notes when using Canvas. In the next articles we will learn how to use HTML5 Canvas API to manipulate objects in Canvas.