Canvas Threejs/WebGL将画布导出为大小的图像

我有一个用户可以绘制的画布，我正试图将画布导出为特定大小的图像（或读取原始数据）

我的画布处于纵向模式（300x500），底层原始图像为400x400。当我使用canvas.toDataURL或context.getPixel时，我的结果总是300x150，因为这似乎是webgl中drawingbuffer大小的默认值。我试图改变这些价值观，但没有效果

我正在使用three.js WebGLRenderer

是否有任何方法可以将画布/图纸导出到正确的尺寸和大小

下面是我的代码的一小部分来说明这个问题：

CSS:

JS:

问题是conext.drawingBufferWidth是300，context.drawingBufferHeight是150，而不是我需要的400x400

---

我知道我从未将其设置为400x400，但我不知道如何/在何处设置为最佳位置。

如果您发布代码，这会有所帮助。我已添加了代码的相关部分，结果我只需要添加行c1.height=400；c1.宽度=400；在创建渲染器之前。我可以发誓我已经试过了。正如你发现的，你的画布需要明确的

宽度
和
高度
属性（不仅仅是CSS）。您还可以通过渲染器进行设置：
renderer.setSize（w，h）只需知道，如果在将元素插入DOM之前更改元素的大小，某些浏览器不喜欢它。
.canvas
{
    width: 300px;
    height: 500px;
    background-color: #352a87;
}

var c1 = $("#mainCanvas").get(0);
renderer =THREE.WebGLRenderer({canvas: c1, preserveDrawingBuffer: true});
// adding scene and draw on the canvas {omitted}

//later
ar context = $('#mainCanvas').get(0).getContext('experimental-webgl');
var pixels = new Uint8Array(context.drawingBufferWidth * 
context.drawingBufferHeight * 4);
context.readPixels(
    0,
    0,
    context.drawingBufferWidth,
    context.drawingBufferHeight,
    context.RGBA,
    context.UNSIGNED_BYTE,
    pixels);