如何实现FabricJS画布实际尺寸大于父容器且按比例缩小显示？

你要实现的是画布实际像素为600px、浏览器中显示为300px，且下载PNG时保留600px宽度的效果，以下是两种可行方案：

方法一：纯CSS实现（最简单） #

直接给canvas元素添加CSS宽度属性，让它填满300px的父容器，同时保留canvas标签的width属性（这是画布的实际像素尺寸）。

修改后的代码：

<div style="width:300px">
    <canvas id="mycanvas" width="600" style="width:100%"></canvas>
</div>

原理：canvas标签的width属性决定真实像素大小，CSS的width控制浏览器显示大小。设置为100%会自动适配父容器的300px空间，且默认按比例缩放高度，避免内容变形。如果需要固定高度，可单独设置CSS height，但需与实际尺寸比例一致，防止拉伸。

方法二：FabricJS内置缩放功能（适合动态场景） #

如果需要后续动态调整显示比例，或有交互需求，用FabricJS自带的缩放功能更灵活：

1. 初始化画布时设置实际尺寸：

const canvas = new fabric.Canvas('mycanvas');
canvas.setWidth(600);
canvas.setHeight(400); // 按需求设置实际高度

2. 计算缩放比例并设置画布缩放：

const zoomRatio = 300 / 600; // 0.5倍缩放
canvas.setZoom(zoomRatio);

3. 可选：让画布在容器中居中显示：

const containerWidth = 300;
const actualWidth = 600;
canvas.viewportTransform[4] = (containerWidth - actualWidth * zoomRatio) / 2;
// 高度居中同理，替换为容器高度和实际高度即可

这种方法下，画布实际像素仍为600px，下载时直接调用canvas.toDataURL()或canvas.download()就能获取原始尺寸的PNG，还可随时修改缩放比例。

注意事项 #

• 静态场景用CSS方案即可，代码简洁；动态交互场景优先选择FabricJS方法。
• 无论哪种方案，canvas标签的width/height属性才是下载时的真实尺寸，CSS仅控制视觉显示。

内容的提问来源于stack exchange，提问作者Raul Mellado