Overnight, Chrome was updated and broke an application feature we’ve deployed.
The application was dynamically drawing a signature into an HTML5 `canvas` element and the user would print the page, which contained the `canvas`. The printed (physical) document would contain the `canvas` containing the signature.
With the Chrome update, `canvas` elements are no longer being displayed on the printed output, physical or PDF.
Here is a quick snippet to quickly gather all canvas elements, dynamically generate an image, and replace the canvas elements with the new image. This fixed the issues with our application.
_Note: The following code is Javascript and relies on jQuery methods, however, all of this functionality can be accomplished without jQuery.
_
```javascript
$(document).ready( function(e)
{
$('canvas').each( function(e)
{
var image = new Image();
image.src = this.toDataURL("image/png");
$(this).replaceWith(image);
});
});
```
Here is what the HTML looks like before the conversion
```html
<canvas id="myCanvas" width="200" height="100"></canvas>
```
Here is what the HTML looks like after the conversion
```html
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAScAAABkCAYAAADE4fY3AAAbUklEQVR4Xu1dfYxc11U/575Zx...">
```