Working with Canvas Elements

Our dynamic recordings use browser Mutation Events to figure out when html content changes. This allows us to record highly dynamic pages with high accuracy. However, canvas elements do not support Mutation Events. 

We do have a workaround.

Notifying Lucky Orange When Canvas Has Updated
If you want to capture changes inside of a canvas element, you'll need to alert Lucky Orange that the canvas element has indeed changed. You do this by calling the LO.update_canvas_element() method and passing in the element to it. The function accepts an actual canvas element OR a query selector. So, if you had a canvas element on your page with an id of my_canvas you could call it like this:

LO.update_canvas("#my_canvas");

Alternatively, if you had many canvas elements that all just updated you could also do this:

LO.update_canvas("canvas");

Calling the LO.update_canvas() method will get the image data from the canvas and send that to our servers. If you have a lot of canvas elements or very large canvas elements and are frequently calling this method, it can use a lot of bandwidth. 

Please ensure you test this out in a staging environment to see the performance impact before pushing to production.