imageConsole.js

// Borrowed from https://github.com/adriancooney/console.snapshot/blob/master/console.snapshot.js

/* eslint-disable no-console, no-param-reassign */

/**
 * Since the console.log doesn't respond to the `display` style,
 * setting a width and height has no effect. In fact, the only styles
 * I've found it responds to is font-size, background-image and color.
 * To combat the image repeating, we have to get a create a font bounding
 * box so to speak with the unicode box characters.
 */
export default (canvas, scale) => {
  const url = canvas.toDataURL();
  const width = canvas.width * (scale || 1);
  const height = canvas.height * (scale || 1);

  const padding = `${Math.floor(height) / 2}px ${Math.floor(width) / 2}px`;
  console.log(
    `%c+`,
    `
      font-size: 1px;
      padding: ${padding};
      line-height: 0px;
      background-image: url(${url});
      background-size: ${width}px ${height}px;
      color: transparent;`,
  );
};