2.10.1

q5js · Nov 22, 2024 · ec62afe · ec62afe
1 parent b2aa9ed
commit ec62afe
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 16 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "q5",
-	"version": "2.10.0",
+	"version": "2.10.1",
 	"description": "A sequel to p5.js that's optimized for interactive art",
 	"author": "quinton-ashley",
 	"contributors": [

diff --git a/q5.js b/q5.js
@@ -1358,7 +1358,9 @@ Q5.renderers.q2d.image = ($, q) => {
 		if (!sh) {
 			sh = drawable.height || drawable.videoHeight;
 		} else sh *= pd;
-		$.ctx.drawImage(drawable, sx * pd, sy * pd, sw, sh, dx, dy, dw, dh);
+		sx *= pd;
+		sy *= pd;
+		$.ctx.drawImage(drawable, sx, sy, sw, sh, dx, dy, dw, dh);
 
 		if ($._tint) {
 			$.ctx.save();
@@ -1368,21 +1370,21 @@ Q5.renderers.q2d.image = ($, q) => {
 			$.ctx.shadowBlur = 0;
 
 			if (img.canvas.alpha) {
-				img.tintImg ??= $.createImage(dw, dh);
-				if (img.tintImg.width != dw || img.tintImg.height != dh) {
-					img.tintImg.resize(dw, dh);
+				img.tintImg ??= $.createImage(img.w, img.h, { pixelDensity: pd });
+				if (img.tintImg.width != img.width || img.tintImg.height != img.height) {
+					img.tintImg.resize(img.w, img.h);
 				}
 
 				let tnt = img.tintImg.ctx;
 				tnt.globalCompositeOperation = 'copy';
 				tnt.fillStyle = $._tint;
-				tnt.fillRect(0, 0, dw, dh);
+				tnt.fillRect(0, 0, img.width, img.height);
 
 				tnt.globalCompositeOperation = 'destination-in';
-				tnt.drawImage(drawable, 0, 0, dw, dh);
+				tnt.drawImage(drawable, 0, 0, img.width, img.height);
 
 				$.ctx.globalCompositeOperation = 'multiply';
-				$.ctx.drawImage(img.tintImg.canvas, 0, 0, dw, dh, dx, dy, dw, dh);
+				$.ctx.drawImage(img.tintImg.canvas, sx, sy, sw, sh, dx, dy, dw, dh);
 			} else {
 				$.ctx.globalCompositeOperation = 'multiply';
 				$.ctx.fillStyle = $._tint;

diff --git a/q5.min.js b/q5.min.js
diff --git a/src/q5-2d-image.js b/src/q5-2d-image.js
@@ -114,7 +114,9 @@ Q5.renderers.q2d.image = ($, q) => {
 		if (!sh) {
 			sh = drawable.height || drawable.videoHeight;
 		} else sh *= pd;
-		$.ctx.drawImage(drawable, sx * pd, sy * pd, sw, sh, dx, dy, dw, dh);
+		sx *= pd;
+		sy *= pd;
+		$.ctx.drawImage(drawable, sx, sy, sw, sh, dx, dy, dw, dh);
 
 		if ($._tint) {
 			$.ctx.save();
@@ -124,21 +126,21 @@ Q5.renderers.q2d.image = ($, q) => {
 			$.ctx.shadowBlur = 0;
 
 			if (img.canvas.alpha) {
-				img.tintImg ??= $.createImage(dw, dh);
-				if (img.tintImg.width != dw || img.tintImg.height != dh) {
-					img.tintImg.resize(dw, dh);
+				img.tintImg ??= $.createImage(img.w, img.h, { pixelDensity: pd });
+				if (img.tintImg.width != img.width || img.tintImg.height != img.height) {
+					img.tintImg.resize(img.w, img.h);
 				}
 
 				let tnt = img.tintImg.ctx;
 				tnt.globalCompositeOperation = 'copy';
 				tnt.fillStyle = $._tint;
-				tnt.fillRect(0, 0, dw, dh);
+				tnt.fillRect(0, 0, img.width, img.height);
 
 				tnt.globalCompositeOperation = 'destination-in';
-				tnt.drawImage(drawable, 0, 0, dw, dh);
+				tnt.drawImage(drawable, 0, 0, img.width, img.height);
 
 				$.ctx.globalCompositeOperation = 'multiply';
-				$.ctx.drawImage(img.tintImg.canvas, 0, 0, dw, dh, dx, dy, dw, dh);
+				$.ctx.drawImage(img.tintImg.canvas, sx, sy, sw, sh, dx, dy, dw, dh);
 			} else {
 				$.ctx.globalCompositeOperation = 'multiply';
 				$.ctx.fillStyle = $._tint;