HTML5 canvas: block this, suckers!

Why it is so hard to block

It is much harder to block canvas element than Flash. Thats because flash ad consist of two elements: flash file (swf) and html <object /> element. If you are using extensions like AdBlock you block not html elements but swf files.

Finding what to block is easy because flash file is loaded "into" element by specyfying href attribute for <embed /> element or adding <param /> element with link to flash file as a child of <object /> element.

With <canvas /> elements you have to block *.js (javascript) files but how to find out which javascript file is responsible for this ad? There is no "src" attribute for <canvas /> element so finding relation between <canvas /> element ans javascript file is very hard (almost impossible). Also JavaScript code can be embeded into webpage html code and it is impossible to block it.

You can block all <canvas /> elements but this is solution similar to not installing flash player. You will have no choice which element to block.

This example

Don't be fooled by simplicity of my example. I wrote it in about 30 minutes and tools for generating canvas animations would be available soon. Adobe is working on tools to convert flash into canvas/javascript right now!

What else?

Remember that there is also <svg /> element but it seems that nobody noticed it. Its content can be manipulated with javascript so it can be as dangerous as canvas.