CanvasContext

多数场景不用显式调用：在 luma.createDevice 时传入 createCanvasContext，设备会自动建好。

创建参数

成员

方法

resize、getAspect、getPixelSize、cssToDeviceRatio 是旧接口，已标记废弃，新代码用上面的尺寸读取方法。

创建并读取尺寸

const device = await luma.luma.createDevice({
  type: 'webgl',
  adapters: [luma.webgl2Adapter],
  createCanvasContext: {
    canvas: 'map-canvas',
    useDevicePixels: Math.min(window.devicePixelRatio, 2),
    autoResize: true
  }
});

const ctx = device.canvasContext;

console.log(ctx.getCSSSize());            // [800, 600]
console.log(ctx.getDrawingBufferSize());  // [1600, 1200]，2 倍像素比
console.log(ctx.getDevicePixelRatio());   // 2

绘制缓冲比 CSS 尺寸大，画面才在高分屏上清晰。 useDevicePixels 传数字时固定该比例，传 true 时跟随系统， 传 false 时按 CSS 像素 1:1 绘制。

拾取鼠标位置

canvas.addEventListener('click', function (e) {
  const rect = canvas.getBoundingClientRect();

  const cssPixel = [e.clientX - rect.left, e.clientY - rect.top];
  const devicePixel = ctx.cssToDevicePixels(cssPixel, true);

  onPick(devicePixel.x, devicePixel.y);
});

设备像素比大于 1 时，CSS 坐标与纹理像素坐标不一致， 直接用鼠标坐标读像素会偏移。yInvert 让结果适配自下而上的纹理坐标系。

WebGL 只有一块画布

WebGL 后端的设备只能绑定一个画布上下文，再次调用 createCanvasContext 会抛错。需要第二个渲染目标时改用 Framebuffer；WebGPU 后端才允许同时存在多个画布。