您可以通过设置背景图像和滤镜的scaleX和scaleY属性来实现背景图像和滤镜不会拉伸到画布的全宽。以下是一个使用fabric.js库的示例代码：

// 创建并初始化画布
var canvas = new fabric.Canvas('canvas');

// 设置画布的宽度和高度
canvas.setWidth(800);
canvas.setHeight(600);

// 加载背景图像
fabric.Image.fromURL('background.jpg', function(img) {
  // 设置图像的宽度和高度
  img.set({
    width: canvas.getWidth(),
    height: canvas.getHeight(),
    scaleX: 1,  // 不拉伸图像
    scaleY: 1,
    selectable: false  // 不可选择
  });

  // 将图像添加到画布的底部
  canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
});

// 创建一个矩形对象
var rect = new fabric.Rect({
  width: 200,
  height: 200,
  fill: 'red'
});

// 将矩形添加到画布
canvas.add(rect);

// 应用滤镜
rect.filters.push(new fabric.Image.filters.Grayscale());

// 应用滤镜效果并重新渲染画布
rect.applyFilters(canvas.renderAll.bind(canvas));

在上述示例中，我们首先创建并初始化了一个画布，并设置了画布的宽度和高度。然后，我们使用fabric.Image.fromURL方法加载了背景图像，并设置了图像的宽度、高度、scaleX和scaleY属性，以确保图像不会拉伸到画布的全宽。接下来，我们创建了一个矩形对象，并将其添加到画布中。然后，我们将一个灰度滤镜应用于矩形，并重新渲染画布。

请注意，canvas.setWidth和canvas.setHeight用于设置画布的宽度和高度，canvas.setBackgroundImage用于将背景图像添加到画布，rect.filters.push用于将滤镜添加到矩形对象，rect.applyFilters用于应用滤镜效果并重新渲染画布。

希望对您有帮助！