铬合金画布上的悲伤脸

Question

当我canvas在我的网站上测试一个与窗口缩放和元素有关的错误时，我注意到在几次调整大小后，该canvas元素上印有一张悲伤的小脸（我没有创建）。有谁知道这意味着什么以及它为什么会在那里？

截屏：

虽然很好笑，但也很混乱。

Answer 1

canvas.width当将和设置canvas.height为非常高的值时，似乎会出现问题。以下代码片段复制了该问题（如果您使用的是 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>