More serious version

[the-baaron]

This is not a request or anything, just thought it could be useful for some:

I made this cleaned up version which allows to debug invisible canvas elements. I find it super useful like this when you're trying to debug canvas elements. Thanks!

just do console.canvas(ctx); and there you go

/**
 * Dubiously created by Adrian Cooney
 * http://adriancooney.github.io
 *
 * Made useful by Ronald Baars
 * https://baars.design
 */
(function (console) {
  "use strict";

  console.canvas = function (ctx, scale = 1) {
    const url = ctx.canvas.toDataURL();
    var img = new Image();

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

    img.src = url;
  };
})(console);