I guess this question is mainly targeted for webdev crowd out there, but you never know 
Let’s say you have a need to block <canvas> element (ad-block style), and i don’t mean block whole canvas - i mean specific element inside <canvas> tag.
Assuming that you don’t have access to back-end, but see such canvas only from user perspective…Is there a way to somehow inspect guts of <canvas> to search & destroy such element by class / id / data attribute or whatever else?
I’m pretty sure the answer is no (except in perhaps very specific circumstances). In general, canvas is just an array of pixels. The information about the elements is not there, except before they are drawn in JavaScript code. The actual shapes drawn on the canvas do not have the class, id, etc…
That’s why you can’t, for example, select text drawn on the canvas, because it is no longer a string of characters, but an array of pixels.
It is easy to block the entire canvas, though.
I believe technically it’s doable with greasemonkey js rules if given element has class / id / data attribute, you can hijack calls to draw such element before it…you know.
Problem is targeting such elements from user perspective…
Yep, but the goal is not to 
Again, that depends on very specific circumstances, there is no general way to do this.
You can generate the contents of the canvas on the backend, and just transmit the pixels to the browser. In that case, there is no way to know what these pixels represent.
Or you can have a WebAssembly program generate the contents of the canvas.
It does not have to be a simple frontend JavaScript program, where the graphics on the canvas is drawn using primitives for which there exists a corresponding JavaScript function.
Once the canvas is filled, there is, in general, no way to tell what is drawn on it (apart from a human being or an A.I. actually looking at the image and identifying what is on it). So your only hope is intercepting the process of generating the pixel data, and there is no general way to do this, it depends on the specific case.
True…But for the sake of simplicity let’s assume 2 things:
It’s generated by JavaScript / JS framework
It most likely has some form of unique identifiers (based on idea of general code structure)
In that case, you have to analyse the code that is generating it and change it to not generate the elements you don’t want it to generate.
Meaning manually scanning crapload of js files from devtools for something something canvas…?
Yes. And it if the code is obfuscated enough, it doesn’t even have to have the word “canvas” or “context” near the relevant code, as canvas context is just a JavaScript object that can be aliased by any variable name.
Yeah, there is no easy way to do this. And if you do not have access to the code generating the canvas data, it’s really difficult. It’s like me sending you a PNG image and telling you to block only certain elements in that image. A canvas is like a bitmap image, an array of pixels. Apart from doing it manually, or by some sophisticated AI magic, there is no general way to do that.
The results that one would generate would get you banned from soycial media. 
That’s great!
I don’t have soycial media!
I’ve used my own intellect to beautify some js code and scope out that offender!
Now it’s time for some nice GreaseMonkey hijacking code, but that’s another story!
Thank you for inspiration!
This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.