javascriptgoogle-chrome

sad face on canvas in chrome

While I was testing out a bug to do with window zoom and a canvas element on my website, I noticed that after a few resizes the canvas element had a small sad face imprinted on it (and one I did not create). Does anyone know what this means and why it might be there?

Screenshot:
the sad face

Although funny, it's very confusing.

Solution

  • The problem seems to arise when setting canvas.width and canvas.height to very high values. The following snippet replicates that problem (if you are on chrome).

    const canvases = document.getElementsByTagName("canvas");

canvases[0].getContext("2d").fillRect(
  0,
  0,
  canvases[0].width,
  canvases[0].height,
);

canvases[1].getContext("2d").fillRect(
  0,
  0,
  canvases[1].width,
  canvases[1].height,
);
    canvas {
  width: 100px;
  height: 100px;
  outline: 1px solid #000000;
}
    <p>canvas 1: regular<p>

<!--normal values-->
<canvas width="1000" height="1000"></canvas>

<p>canvas 2: very high width and height<p>

<!--very high values-->
<canvas width="100000" height="100000"></canvas>