如何在Fabric.js中创建大显示尺寸、低分辨率的画布

Fabric.js 的 setDimensions 方法默认会同时修改 canvas 元素的内联 CSS 宽高和画布实际像素缓冲区尺寸，内联 CSS 的优先级高于外部 CSS 文件定义的样式，因此你写的外部样式被覆盖，无法生效。

1. 修改JS逻辑 #

调用 setDimensions 时添加 backstoreOnly: true 配置，让 Fabric 仅修改画布实际像素尺寸，不修改元素的 CSS 样式：

canvas.setDimensions(
  { width: 10, height: 10 }, // 实际像素尺寸，可根据需求调整到极小值
  { backstoreOnly: true }
);

2. 调整CSS样式 #

直接定义画布的显示尺寸，可按需添加属性控制拉伸效果：

/* 清除页面默认边距，避免出现滚动条 */
body {
  margin: 0;
  overflow: hidden;
}

#canvas {
  /* 占满整个视口 */
  width: 100vw;
  height: 100vh;
  /* 可选：添加以下属性实现硬边缘像素风，去掉则拉伸会有模糊效果 */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

该方案下画布实际内存占用只和你设置的小尺寸像素有关，比如10*10的画布内存占用仅为400字节左右，完全不会触发480MB的内存上限，拉伸显示后完全符合低分辨率、类MS Paint的效果。如果设置画布实际宽高为1px，画一个黑色矩形后拉伸，整个页面就会全黑，符合你的需求。

Fabric 内置的事件监听已经自动做好了坐标转换，你通过 canvas.on('mouse:down') 等事件获取到的点击坐标已经是对应小尺寸画布的实际坐标，不需要手动计算缩放比例，可以直接使用。

内容的提问来源于stack exchange，提问作者Curtis F