Dynamically Generate and Replace HTML5 canvas Elements With img Elements

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.


$(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


<canvas id="myCanvas" width="200" height="100"></canvas>

Here is what the HTML looks like after the conversion


<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAScAAABkCAYAAADE4fY3AAAbUklEQVR4Xu1dfYxc11U/575Zx...">