fix drawCanvas2D upside down issues

i discovered the problem is that images are rendered upside down with canvas2d, because the y axis is flipped. so now it works properly for everything.
KilledByAPixel · Nov 19, 2024 · 02af89a · 02af89a
1 parent 539865a
commit 02af89a
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 6 deletions.
diff --git a/plugins/box2d.js b/plugins/box2d.js
@@ -765,7 +765,7 @@ function box2dDrawPoly(pos, angle, points, color=WHITE, outlineColor, lineWidth=
     drawCanvas2D(pos, vec2(1), angle, 0, context=>
     {
         context.beginPath();
-        points.forEach(p=>context.lineTo(p.x, -p.y));
+        points.forEach(p=>context.lineTo(p.x, p.y));
         context.closePath();
         box2dDrawFillStroke(context, color, outlineColor, lineWidth);
     }, 0, context);
@@ -776,8 +776,8 @@ function box2dDrawLine(pos, angle, posA, posB, color=WHITE, lineWidth=.1, contex
     drawCanvas2D(pos, vec2(1), angle, 0, context=>
     {
         context.beginPath();
-        context.lineTo(posA.x, -posA.y);
-        context.lineTo(posB.x, -posB.y);
+        context.lineTo(posA.x, posA.y);
+        context.lineTo(posB.x, posB.y);
         box2dDrawFillStroke(context, 0, color, lineWidth);
     }, 0, context);
 }

diff --git a/src/engineDebug.js b/src/engineDebug.js
@@ -337,7 +337,7 @@ function debugRender()
             const pos = worldToScreen(p.pos);
             overlayContext.translate(pos.x|0, pos.y|0);
             overlayContext.rotate(p.angle);
-            overlayContext.scale(1, 1);
+            overlayContext.scale(1, p.text ? 1 : -1);
             overlayContext.fillStyle = overlayContext.strokeStyle = p.color;
 
             if (p.text != undefined)
@@ -354,7 +354,7 @@ function debugRender()
                 for (const point of p.points)
                 {
                     const p2 = point.scale(cameraScale).floor();
-                    overlayContext.lineTo(p2.x, -p2.y);
+                    overlayContext.lineTo(p2.x, p2.y);
                 }
                 overlayContext.closePath();
                 p.fill && overlayContext.fill();

diff --git a/src/engineDraw.js b/src/engineDraw.js
@@ -250,6 +250,7 @@ function drawTile(pos, size=vec2(1), tileInfo, color=new Color,
     {
         // normal canvas 2D rendering method (slower)
         showWatermark && ++drawCount;
+        size = vec2(size.x, -size.y); // fix upside down sprites
         drawCanvas2D(pos, size, angle, mirror, (context)=>
         {
             if (textureInfo)
@@ -391,7 +392,7 @@ function drawCanvas2D(pos, size, angle, mirror, drawFunction, screenSpace, conte
     context.save();
     context.translate(pos.x+.5, pos.y+.5);
     context.rotate(angle);
-    context.scale(mirror ? -size.x : size.x, size.y);
+    context.scale(mirror ? -size.x : size.x, -size.y);
     drawFunction(context);
     context.restore();
 }