What is Canvas? Canvas Review

Canvas is a dynamic drawing tag in HTML5. Canvas uses HTML5 Canvas API and JavaScript to dynamically generate images that users want. Like other tracking techniques, this method has been adopted by thousands of websites in the past few years, from Wihtehouse.gov to Youporn.com.

About Canvas

The HTML5 <canvas> element is used to draw graphics, which is done through scripts (usually JavaScript).

The <canvas> tag is just a graphics container, and users must use scripts to draw graphics.

Canvas can be used in a variety of ways to draw paths, boxes, circles, characters, and add images.

Browser support

The numbers in the table indicate the first browser version to support the <canvas> element:

Create a Canvas

1. A canvas is a rectangular box on a web page, which is drawn using the <canvas> element.

Note: By default, the <canvas> element has no border and no content.

2. A simple example of <canvas> is as follows:

<canvas id="myCanvas" width="200" height="100"></canvas>

Note: Tags usually need to specify an ID attribute (often referenced in scripts) The Width and Height attributes define the size of the canvas.

Tip: You can use multiple <canvas> elements in an HTML page.

3. Use the Style property to add a border: The example is as follows:

<canvas id="myCanvas" width="200" height="100"

style="border:1px solid #000000;">

</canvas>

Canvas fingerprint tracking technology

1. Background: There are many ways to track visitors today, such as using cookie technology on the user side. This technology has been abandoned by most companies. Now there is a new method to replace cookies to track users. In the past few years, many websites and tracking software have begun to use HTML5 Canvas fingerprints.

2. Introduction: Fundamentally, each browser uses a different image processing engine, different export options, and different compression levels, so the graphics drawn by each computer will be slightly different. These patterns can be used to assign specific numbers (fingerprints) to user devices, that is, they can be used to identify different users. Security researchers from Princeton University and the University of Leuven in Belgium published a research report pointing out that even computer experts find it difficult to protect their privacy when facing tracking technology based on Canvas fingerprints.

3. Application of Canvas tracking in the advertising field: Online advertising companies often track user behavior. They hope to understand consumer behavior by establishing interest profiles for each user. Usually, if users clear the cookies on their computers or block cookies, advertisers will not know whether visitors have visited their ads, which greatly reduces the effectiveness of advertising and reduces the revenue of advertising companies. Therefore, these advertising companies have been committed to trying newer and better ways to understand the information of website visitors. Some large advertising companies have converted previous Flash-based ads to HTML5 animated ads. HTML5 Canvas is not only limited to image processing, it can also monitor user keyboard input, mouse movement, and touch events.

4. Canvas fingerprint is supported by all mainstream browsers: HTML5 Canvas technology is supported by all mainstream browsers and can be accessed through most PCs, tablets, and smartphones. At present, Canvas fingerprint is difficult to block. As long as the user uses a browser to surf the Internet, the user's whereabouts are equivalent to being public.