无法在p5.Graphics缓冲区绘制矩形：grid属性未定义报错

错误原因 #

你在使用createGraphics时指定了WEBGL上下文，但WEBGL模式下的rect函数与2D模式的行为、参数逻辑完全不同。错误中的Cannot read properties of undefined (reading 'grid')，是因为WEBGL模式下p5.js内部用于2D绘制的相关状态未初始化，直接调用2D风格的rect会触发内部错误。

解决方案 #

方案1：改用2D模式创建图形缓冲区（推荐） #

你的需求是绘制2D灰色矩形，完全不需要WEBGL上下文，直接去掉WEBGL参数即可：

let bg;
function setup() {
  createCanvas(600, 600);
  // 移除WEBGL参数，使用默认2D上下文
  bg = createGraphics(600, 600);
  bg.fill(100);
  bg.stroke(100);
}

function draw() {
  bg.background(0);
  bg.rect(0,0,600,600);
  image(bg,0,0);
}

方案2：如果必须使用WEBGL模式 #

若你确实需要WEBGL环境，需要适配WEBGL的坐标系统（默认原点在画布中心），并调整绘制逻辑：

let bg;
function setup() {
  createCanvas(600, 600);
  bg = createGraphics(600, 600, WEBGL);
  bg.fill(100);
  bg.stroke(100);
  // WEBGL模式下设置矩形以中心为基准对齐
  bg.rectMode(CENTER);
}

function draw() {
  bg.background(0);
  // 以画布中心为原点绘制对应尺寸的矩形
  bg.rect(0, 0, 600, 600);
  image(bg,0,0);
}

效果说明 #

修改后，图形缓冲区会正常绘制灰色矩形，并通过image函数渲染到主画布上，实现你预期的效果。

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