Support for high density monitors with devicePixelRatio
@Absulit 已经在做这个了。
开始于 2026年6月2日。
评估
- 难度
- 3/5
- 预计耗时
- 1-2 天
- 新手友好度
- 65/100
- Issue 类型
- 功能
- 描述清晰度
- 基本清楚
- 活跃度
- 冷清
- 技术栈
- javascript
调研方向
该 issue 涉及高密度显示器上的 canvas 调整大小。查看代码片段中对 ResizeObserver 的使用位置，该代码可能位于 canvas 管理模块中。首先找到 canvas 的初始化和调整大小位置，然后按所示集成对 devicePixelRatio 的支持。在高 DPI 显示屏上运行该库，并检查 canvas 渲染是否清晰，以此进行测试。
由索引模型根据 Issue 内容生成。
描述
This is related to #299
Required for high density monitors and the HTML in Canvas to not look blurry, it needs to support the device pixel ratio
const observer = new ResizeObserver(this.#resizeCanvasToFitWindow);
const supportsDevicePixelContentBox =
typeof ResizeObserverEntry !== 'undefined' &&
'devicePixelContentBoxSize' in ResizeObserverEntry.prototype;
const options = supportsDevicePixelContentBox ? { box: 'device-pixel-content-box', signal } : { signal };
observer.observe(this.#canvas, options);
#resizeCanvasToFitWindow = (entries) => {
// there are some calls of this function that do not have entries
// because of this, clientWidth and clientHeight values are used
const entry = entries?.[0];
this.#screenResized = true;
if (this.#fitWindow) {
const width = entry?.contentRect?.width || this.#canvas.clientWidth;
const height = entry?.contentRect?.height || this.#canvas.clientHeight;
const dpc = entry?.devicePixelContentBoxSize;
this.#canvas.width = dpc ? dpc[0].inlineSize : Math.round(width * window.devicePixelRatio);
this.#canvas.height = dpc ? dpc[0].blockSize : Math.round(height * window.devicePixelRatio);
this.#setScreenSize();
this.#frame()
}
}
- 主要语言
- JavaScript
- 星标
- 56
- 派生
- 5
- PR 合并指标
- 30 天内没有已合并 PR
环境准备
这个项目没有提供开发容器、Dockerfile 或贡献指南，环境需要你自己搭建：先看它的 README，通用步骤见我们的新手贡献指南。
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
Absulit/points 的其他 Issue
-
binding ids don't match可能重新可做 @Absulit 于 116 天前认领，目前没有进行中的 PR。 未关闭bug
难度 3/5 1-2 天 新手友好度 55/100
-
Generate a default canvas instead of assigning one可能重新可做 @Absulit 于 139 天前认领，目前没有进行中的 PR。 未关闭enhancement good first issue
难度 3/5 1-2 天 新手友好度 45/100
-
难度 4/5 3-5 天 新手友好度 25/100
-
Implement immediates可能重新可做 @Absulit 于 144 天前认领，目前没有进行中的 PR。 未关闭canned enhancement
难度 4/5 3-5 天 新手友好度 45/100
-
On screen resize, blank frames are displayed可能重新可做 @Absulit 于 144 天前认领，目前没有进行中的 PR。 未关闭bug
难度 3/5 1-2 天 新手友好度 35/100
相似的 Issue
-
Awaiting Maintainer Approval Bug
难度 2/5 1-3 小时 新手友好度 62/100
processing/p5.js-web-editor#4364 ·
维护者通常 4 天内回复
-
难度 2/5 1-3 小时 新手友好度 62/100
woocommerce/woocommerce-google-analytics-integration#699 ·
维护者通常 1 天内回复
-
bug
难度 2/5 1 小时以内 新手友好度 74/100
维护者通常 2 天内回复
-
难度 2/5 1-3 小时 新手友好度 82/100
JsCommunity/app-conf#22 ·
-
难度 2/5 1-3 小时 新手友好度 62/100
维护者通常 1 天内回复