Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

[Bug]: p5.Image.prototype.copy and blend do not scale destination coordinates for high pixel density

オープン 初心者向け
  • 何か問題がありますか？
#9,169 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 2 日以内に返信

@Pcmhacker-piro がすでに取り組んでいます。

2026年9月11日 から。

  • #9168 @Pcmhacker-piro による — オープン

評価

難易度
2/5
見積もり時間
1〜3時間
初心者へのやさしさ
78/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
javascript
領域
computer-graphics

調査の方向性

p5.Image.prototype._copyHelper の 920〜960 行付近から始め、提供されている high-DPI の copy() 例で問題を再現してください。dstImage.drawingContext.drawImage() に渡される宛先の値を確認し、pixelDensity(2) を使用した場合に copy() と blend() の両方が意図した論理領域をカバーしていることを検証してください。

索引モデルが issue の本文から書いたものです。

説明

Most appropriate component

Image (p5.Image, image, etc.)

Describe the bug

When calling copy() or blend() on a p5.Image instance that has pixelDensity > 1 (e.g., Retina / high-DPI displays), the destination coordinates (dx, dy, dw, dh) are not scaled by the destination image's pixel density.

In p5.Image.prototype._copyHelper (lines 920-960), the source coordinates are scaled by s = srcImage.canvas.width / srcImage.width, but the destination parameters are passed directly as raw logical values to dstImage.drawingContext.drawImage().

Because dstImage.drawingContext operates directly on the physical canvas of dstImage without an automated DPI transformation matrix, drawImage() draws into only [dx, dy, dw, dh] physical canvas pixels instead of [d*dx, d*dy, d*dw, d*dh].

For pixelDensity(2), this results in the copied image covering only 1/4th of the intended area in the top-left corner, leaving the remaining 75% of the intended target area completely untouched (transparent / blank). Because p5.Image.prototype.blend() delegates to copy(), it suffers from the identical issue.

Steps to reproduce
let src = createImage(50, 50);
src.loadPixels();
for (let i = 0; i < src.pixels.length; i += 4) {
  src.pixels[i] = 255;     // Red
  src.pixels[i + 3] = 255; // Alpha
}
src.updatePixels();

let dst = createImage(100, 100);
dst.pixelDensity(2); // canvas backing store is 200x200
dst.copy(src, 0, 0, 50, 50, 0, 0, 50, 50);

// Sample a point in the bottom-right quadrant of the logical image
let col = dst.get(35, 35);
console.log(col); // [0, 0, 0, 0] instead of [255, 0, 0, 255]
Expected behavior

The destination coordinates should be scaled by d = dstImage.canvas.width / dstImage.width so that copy() and blend() properly fill the intended logical region on high-DPI images.

主要言語
JavaScript
スター
24.1k
フォーク
3.9k
平均マージ
3日 19時間
マージ済み PR（30日）
33

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

processing/p5.js のほかの issue

processing/p5.js の issue をすべて見る

似ている issue

JavaScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。