hide-if-canvas-contains
The hide-if-canvas-contains snippet hides a canvas element, or a parent element specified by the selector parameter, if the canvas contains the specified search term in it.
We override the fillText, strokeText, and drawImage canvas methods. When a website uses these functions, it won't use the native functions but instead use our overridden proxies. This allows us to know when a website writes text we are interested in (Sponsored, Advertised etc.) to the <canvas>, or loads an image whose source matches a specified pattern, and hide the ad.
Parameters
search
String or regex pattern that will be searched in fillText, strokeText and drawImage
Yes
-
selector
The selector identifies the HTML element to hide. This can be the canvas element itself or a parent of the canvas. Defaults to the canvas element if not provided.
No
canvas
Use cases
Hiding a canvas element or one of its ancestors based on the text written in the canvas element or the
img.srcpassed todrawImage.
Filter examples
The following table lists examples that use the hide-if-canvas-contains snippet:
hide-if-canvas-contains /sponsored/
Hides any canvas element whose text content matches sponsored and has been added with a fillText or strokeText call.
hide-if-canvas-contains /sponsored/ .canvas-parent
Hides any HTML element with a class `canvas-parent` that contains a canvas element whose text content matches sponsored and has been added with a fillText or strokeText call.
hide-if-canvas-contains /AAAAoAAAAKCA/ .canvas-parent
Hides any HTML element with a class canvas-parent containing a canvas element whose source (image.src) in its drawImage call matches the /AAAAoAAAAKCA/ regex pattern.
Debugging
1
CanvasRenderingContext2D proxied
After we have wrapped the CanvasRenderingContext2D object.
From this moment on CanvasRenderingContext2D's methods fillText, strokeText, and drawImage are intercepted by us.
2
The parameter 'search' is required
Right after the snippet fires.
Mandatory params missing. Double check your filter.
3
drawImage called with arguments: <<img node and other arguments>>
Every time that drawImage is called in the page.
It shows the arguments used to create the canvas to support filter writing: filter developers can use this debug log to write regex that matches specific canvases.
4
Matched <<HTML element>>
FILTER: hide-if-canvas-contains '<<param>>'
Right after an HTML element has been matched.
An HTML element that matches the given parameters has been successfully found and hidden. The filter that successfully hid an HTML element (the parameters will be individually wrapped in single quotes).
Last updated