Canvasblocker

The Canvas API provides a means for drawing graphics via JavaScript and the HTML<canvas> element. Among other things, it can be used for animation, game graphics, data visualization, photo manipulation, and real-time video processing.

1. Canvas Blocker
2. Canvasblocker Firefox
3. Canvasblocker Fingerprint Protect

• A Firefox extension to protect from being fingerprinted.
• This is a fork of CanvasBlocker for Pale Moon, made to add these new features which last compatible version does not have: DOMRect, webaudio, history and windows fake fingerprinting. Pay attention that faking can greatly affect performance on some sites.

Sometimes CanvasBlocker does make web pages freeze and I have to stop the extension for that page. CanvasBlocker has a really ugly, old and a bit messy UI. Do you think I still need to use it? Is there any other (better) alternative? These add-ons (CanvasBlocker and Canvas Defender) displays notifications and blocks requests depending on how they are configured. Mozilla plans to integrate a permissions prompt natively in the Firefox web browser. Otherwise, you can use TorBrowser that already has this feature.

The Canvas API largely focuses on 2D graphics. The WebGL API, which also uses the <canvas> element, draws hardware-accelerated 2D and 3D graphics.

Basic example

This simple example draws a green rectangle onto a canvas.

HTML

JavaScript

The Document.getElementById() method gets a reference to the HTML <canvas> element. Next, the HTMLCanvasElement.getContext() method gets that element's context—the thing onto which the drawing will be rendered.

The actual drawing is done using the CanvasRenderingContext2D interface. The fillStyle property makes the rectangle green. The fillRect() method places its top-left corner at (10, 10), and gives it a size of 150 units wide by 100 tall.

Result

Reference

Note: The interfaces related to the WebGLRenderingContext are referenced under WebGL.

CanvasCaptureMediaStreamTrack is a related interface.

Guides and tutorials

Libraries

The Canvas API is extremely powerful, but not always simple to use. The libraries listed below can make the creation of canvas-based projects faster and easier.

• EaselJS is an open-source canvas library that makes creating games, generative art, and other highly graphical experiences easy.
• Fabric.js is an open-source canvas library with SVG parsing capabilities.
• heatmap.js is an open-source library for creating canvas-based data heat maps.
• JavaScript InfoVis Toolkit creates interactive data visualizations.
• Konva.js is a 2D canvas library for desktop and mobile applications.
• p5.js has a full set of canvas drawing functionality for artists, designers, educators, and beginners.
• Paper.js is an open-source vector graphics scripting framework that runs on top of the HTML5 Canvas.
• Phaser is a fast, free and fun open source framework for Canvas and WebGL powered browser games.
• Pts.js is a library for creative coding and visualization in canvas and SVG.
• Rekapi is an animation key-framing API for Canvas.
• Scrawl-canvas is an open-source JavaScript library for creating and manipulating 2D canvas elements.
• The ZIM framework provides conveniences, components, and controls for coding creativity on the canvas — includes accessibility and hundreds of colorful tutorials.

Note: See the WebGL API for 2D and 3D libraries that use WebGL.

Specifications

Browser compatibility

Mozilla applications gained support for <canvas> starting with Gecko 1.8 (Firefox 1.5). The element was originally introduced by Apple for the OS X Dashboard and Safari. Internet Explorer supports <canvas> from version 9 onwards; for earlier versions of IE, a page can effectively add support for <canvas> by including a script from Google's Explorer Canvas project. Google Chrome and Opera 9 also support <canvas>.

See also

Thought your canvas fingerprint blocker made you incognito? Think again.

Canvas Blocker

As many know, canvas fingerprinting is the most recent development in web tracking. In the past, the easiest way to prevent web tracking was to block out the method of tracking entirely. For example, to prevent cookie tracking, you simply disable cookies in your browser.

Canvasblocker Firefox

But when it comes to canvas fingerprinting, things are not so cut-and-dry. Believe it or not, using a canvas fingerprint blocker can make you more trackable than if you weren’t using one. That statement defies common sense, but it’s true.

To understand why it is so, we must, first, explore canvas fingerprinting as a whole and how it works. Then we tackle canvas fingerprint blockers and why they don’t work. To conclude, we’ll cover the only modern and viable method that does work to stop canvas fingerprint tracking.

If you value your privacy and are currently using a canvas fingerprint blocker, this is must-know information for 2016.

The essence of fingerprinting

Fingerprinting is taking your browser’s attributes and using them to create a tracking profile for you (technically, your computer).

As an example, imagine we start with a group of 1,000,000 visitors.

Imagine 60% of these visitors use Chrome and 40% – use Firefox. Our audience is now split into two groups.

Canvasblocker Fingerprint Protect

Within these groups, each visitor will be using a different version of his or her respective browser. That’s another fingerprint. If we exist in an alternate universe where there are only three versions of Firefox, our 40% group is now split into three groups of 13.3% each.

Fingerprints continue to build on one another until visitors are categorized into very specific groups. The 1,000,000 visitors may be grouped into hundreds or thousands of smaller categories. Once you are in a group, website owners can then track you relatively easily.

But the problem with ordinary fingerprinting is that it’s not drilled-down enough for websites with big data. There are only a certain number of potential fingerprints. With lots of traffic, the categorized groups are usually still too big to use useful.

That’s when canvas fingerprinting comes into play.

Sign up for updates

Get the latest news and articles on browser fingerprinting and profile management. No spam, we promise!

Like fingerprinting, but infinitely more powerful

Canvas fingerprinting relies on the Canvas HTML5 element, which allows the browser to “draw” an image onto a web page. Every computer will generate a different unique image based on its particular browser and operating system attributes. For example, different browsers will use different image processing engines. Different operating systems will use different sub-pixel rendering engines. Et cetera, et cetera.

Many factors influence both, browser and operating system level when generating a canvas image. They all work together to create a very specific image and put you into a very small group. When the image you generate is combined with ordinary fingerprint tracking, canvas fingerprinting can put you into an even smaller group from there. Sometimes, canvas fingerprinting can separate groups so effectively that each “group” is an individual. That’s the ultimate goal.

And that’s why some users are so keen to prevent canvas fingerprinting from taking place. If you value anonymity, canvas fingerprinting doesn’t just make you trackable similar to what a cookie does. Canvas fingerprinting can identify you as you.

But stopping it is harder than meets the eye.

Canvas fingerprint blocking tactics – and why they don’t work

There are two primary ways to block canvas fingerprinting. Each one is equally ineffective.

Preventing canvas fingerprinting entirely

Your first instinct is probably to grab a browser extension that prevents the canvas image from loading. If it doesn’t load, they can’t track you – right?

Wrong. Preventing the canvas image from loading is an identifier in itself. Although the canvas fingerprint will not be sent, the fact that you did not load the canvas image will be. So, you will be sorted into a very small group of tech-savvy users who are also blocking fingerprints. From there, sometimes your ordinary fingerprints will be enough to identify you completely.

To visualize how this works, imagine you are standing in a crowd. Not caring about canvas fingerprinting is like you’re just standing there smiling. Having a canvas fingerprint blocker is like you’re standing there with a mask. No one is sure who you are exactly, but you’re the only one wearing a mask so you can be identified like that. Even if a few other people are wearing masks, you all are simply grouped as “the people wearing masks”.

If everyone were to use canvas fingerprint blockers (or wear masks, as in our example), they would be effective. But as it stands, almost no one uses canvas fingerprint blockers. Heck, it’s estimated that only 5% to 10% of web users utilize an ad blocker. The percentage of canvas fingerprint blockers must be a small fraction of that, and that’s not a big enough group to blend into – far from it.

Submitting random canvas fingerprints

Using different fingerprints for every request doesn’t work for the same reason as submitting no fingerprint at all. Any regular visitor will not change his fingerprint during a session. So, if you change your fingerprint during a session, that behavior is unusual, and it’s enough to categorize you into an irregular group.

In our example, submitting random canvas fingerprint is like changing the outfit you wear every 10 seconds. On the first request, you look normal. But if you change your outfit 10 seconds later on the second request, even though you’re not wearing a mask, you still make yourself stand out. Normal people don’t change their outfits throughout the day or use different canvas fingerprint identities in a single session.

The only viable solution that exists

Most web users don’t want or need to go to the trouble of blocking canvas fingerprinting technology. If you are an experienced web user who values his or her privacy above all, there is a way.

Here’s how:

• Make the canvas fingerprinting function available on the websites you visit. (So it’s not clear you are wearing a mask.)
• Use a canvas identity with consistency. (So it’s not clear you are trying to avoid detection.)
• Switch up the identity when necessary. (To erase your tracks.)

You are still being tracked – that’s unavoidable. But you control the tracking. When you change your fingerprint, you destroy any evidence of your browsing history on the other fingerprint. You wipe the slate clean. And because you used the old fingerprint with consistency, you have not been sorted into an irregular group and tracked like that. No one can recognize that you wiped the slate clean in the first place.

Whew! We hope you stuck with us through that lengthy explanation. Canvas fingerprinting is on the rise, and “blockers” or “random submitters” will not keep you safe – in fact, they will make you more easily trackable.

And now you know why.