HTML canvas: create a drawing area with JavaScript

With the tag (tag) HTML you create a rectangular area that can be filled with graphics or animations via JavaScript. For this, a 2D context is created. You then define the desired content using different methods for the tag API .

HTML canvas: what is it?

HTML is an element that provides a drawing area in which you can create graphics or animations with JavaScript. The size of this area is defined by height and width attributes. It can be embedded anywhere on an HTML document using the HTML tag.

The content of this “web” (French translation of canvas) is not strictly speaking part of the structure of a web page, which prevents the application of CSS styles or the integration of other HTML elements. If the HTML tag is not supported by a browser, the fallback content (fallback) is displayed instead. However, modern browsers support this element by default.

HTML tag : the syntax

The HTML element does not provide design tools itself, but creates the framework within which you can draw graphics with JavaScript. The basic syntax of the element is:

You name the element with the attribute id and assign it the desired dimensions with width (width) and height (height). Optionally, you can use other parameters to specify the chart design.

The operation of explained with a simple example

Using the syntax above, you can easily create a drawing area at any time. In our example, this area will have a width of 500 pixels and a height of 250 pixels. Here is the corresponding code:

However, this method will give you nothing more than a simple blank surface. Only JavaScript allows you to fill the element generated with shapes, images, texts or gradientsand animate these objects if necessary. Content is dropped as pixels into a bitmap, which can then be converted into a graphics file PNG.

To use this item, you must use the method getElementById(). This only works if you have assigned a unique ID to the surface . If you want to paint, draw, or otherwise interact within the defined area, you must create a 2D context. This works in our example with the following code:

const ExempleCanvas = document.getElementById("ExempleCanvas");
const ctx = ExempleCanvas.getContext("2d");

Now all preparations are made to use HTML ! With the function fillRect()we want to draw a simple rectangle in the defined area. This must be petrol blue in color (teal in English) and measure 200 pixels wide and 150 pixels high. We place it 10 pixels from the left edge and 50 pixels from the top edge. The whole code looks like this:

What is the HTML tag for? ?

While in our previous example we simply drew a rectangle, the element also allows you to create much more complex shapes. It is possible to create and integrate arcs, text boxes, transparencies, color gradients and graphics in formats GIF, JPEG And PNG. You can crop, resize and position them as you wish. In addition, JavaScript's temporal function allows you to create animations inside an HTML tag. .

What dimensions are allowed for an element ?

Maximum dimensions of an HTML element vary by browser and environment. For example, on iOS the limit is typically 4096 x 4096 pixels, while other systems may allow dimensions larger than 10,000 x 10,000 pixels. However, the surface is not automatically responsive based on aspect ratio. You need to manage dimensions and scale via CSS or JavaScript to ensure it scales well across different devices. In web development, this is called responsive design.

Overview of methods for the HTML API

We have already discussed creating a 2D context. With such context obtained via getContext("2d")you can draw on the surface at any time. Here is a summary of the most important API methods.

Text

Picture

Drawing

Paths

Creation

Other functions

HTML : example with text and color gradient

We'll use some of the methods described previously for this example. To do this, we first create a rectangle of 500 x 250 pixels via HTML tag . We then establish a 2D context. Finally, we insert a title and another sentence which receives a color gradient. The corresponding code looks like this:

Nous utilisons les méthodes strokeText() et createLinearGradient()