Fix: Canvas rendering broken in newer Chrome versions (#28)

* fix: resolve grey canvas rendering issue in newer Chrome versions

Recent Chrome updates broke createImageBitmap when using resizeWidth/resizeHeight
options, causing the preview canvas to render as grey. This fix uses a canvas-based
resizing approach as a workaround, drawing the image to a temporary canvas before
creating the ImageBitmap.

The image dimensions are set correctly via ImageElement_resize, then drawn to a
canvas which is used to create the final ImageBitmap. This achieves the same result
while avoiding the Chrome rendering bug.

* fix: resolve export error and handle null pointer in trace

- Fix path-data-polyfill.js arrow functions breaking 'this' context
  Changed 10 prototype methods from arrow functions to regular functions
  to properly bind 'this' when called on SVG elements. This fixes the
  'this.getAttribute is not a function' error during export.

- Add null pointer check in potrace.zig to_polylist function
  Handle empty trace results when no paths are found in the image,
  preventing crashes on transparent or empty images.

Author: avolmensky

native/src/potrace.zig

@@ -150,6 +150,11 @@ pub const Trace = struct {
     };
 
     pub fn to_polylist(self: *Trace, allocator: std.mem.Allocator, bezier_resolution: f32) !PolyList {
+        // Handle null plist (can occur when trace finds no paths in the image)
+        if (@intFromPtr(self.state.plist) == 0) {
+            return .{ .allocator = allocator, .items = &.{} };
+        }
+        
         var polys = std.ArrayList(Poly).init(allocator);
         var outline: ?[]Point = null;
         var holes = std.ArrayList([]Point).init(allocator);

web/scripts/path-data-polyfill.js

@@ -915,7 +915,7 @@ if (!SVGPathElement.prototype.getPathData || !SVGPathElement.prototype.setPathDa
             setAttributeNS.call(this, namespace, name, value);
         };
 
-        SVGPathElement.prototype.removeAttribute = (name, _value) => {
+        SVGPathElement.prototype.removeAttribute = function(name, _value) {
             if (name === "d") {
                 this[$cachedPathData] = null;
                 this[$cachedNormalizedPathData] = null;
@@ -924,7 +924,7 @@ if (!SVGPathElement.prototype.getPathData || !SVGPathElement.prototype.setPathDa
             removeAttribute.call(this, name);
         };
 
-        SVGPathElement.prototype.removeAttributeNS = (namespace, name) => {
+        SVGPathElement.prototype.removeAttributeNS = function(namespace, name) {
             if (name === "d") {
                 let namespaceURI = "http://www.w3.org/2000/svg";
 
@@ -945,7 +945,7 @@ if (!SVGPathElement.prototype.getPathData || !SVGPathElement.prototype.setPathDa
             removeAttributeNS.call(this, namespace, name);
         };
 
-        SVGPathElement.prototype.getPathData = (options) => {
+        SVGPathElement.prototype.getPathData = function(options) {
             if (options?.normalize) {
                 if (this[$cachedNormalizedPathData]) {
                     return clonePathData(this[$cachedNormalizedPathData]);
@@ -974,7 +974,7 @@ if (!SVGPathElement.prototype.getPathData || !SVGPathElement.prototype.setPathDa
             return pathData;
         };
 
-        SVGPathElement.prototype.setPathData = (pathData) => {
+        SVGPathElement.prototype.setPathData = function(pathData) {
             if (pathData.length === 0) {
                 if (isIE) {
                     // @bugfix https://github.com/mbostock/d3/issues/1737
@@ -1003,7 +1003,7 @@ if (!SVGPathElement.prototype.getPathData || !SVGPathElement.prototype.setPathDa
             }
         };
 
-        SVGRectElement.prototype.getPathData = (options) => {
+        SVGRectElement.prototype.getPathData = function(options) {
             const x = this.x.baseVal.value;
             const y = this.y.baseVal.value;
             const width = this.width.baseVal.value;
@@ -1044,7 +1044,7 @@ if (!SVGPathElement.prototype.getPathData || !SVGPathElement.prototype.setPathDa
             return pathData;
         };
 
-        SVGCircleElement.prototype.getPathData = (options) => {
+        SVGCircleElement.prototype.getPathData = function(options) {
             const cx = this.cx.baseVal.value;
             const cy = this.cy.baseVal.value;
             const r = this.r.baseVal.value;
@@ -1065,7 +1065,7 @@ if (!SVGPathElement.prototype.getPathData || !SVGPathElement.prototype.setPathDa
             return pathData;
         };
 
-        SVGEllipseElement.prototype.getPathData = (options) => {
+        SVGEllipseElement.prototype.getPathData = function(options) {
             const cx = this.cx.baseVal.value;
             const cy = this.cy.baseVal.value;
             const rx = this.rx.baseVal.value;
@@ -1087,14 +1087,14 @@ if (!SVGPathElement.prototype.getPathData || !SVGPathElement.prototype.setPathDa
             return pathData;
         };
 
-        SVGLineElement.prototype.getPathData = () => {
+        SVGLineElement.prototype.getPathData = function() {
             return [
                 { type: "M", values: [this.x1.baseVal.value, this.y1.baseVal.value] },
                 { type: "L", values: [this.x2.baseVal.value, this.y2.baseVal.value] },
             ];
         };
 
-        SVGPolylineElement.prototype.getPathData = () => {
+        SVGPolylineElement.prototype.getPathData = function() {
             const pathData = [];
 
             for (let i = 0; i < this.points.numberOfItems; i += 1) {
@@ -1109,7 +1109,7 @@ if (!SVGPathElement.prototype.getPathData || !SVGPathElement.prototype.setPathDa
             return pathData;
         };
 
-        SVGPolygonElement.prototype.getPathData = () => {
+        SVGPolygonElement.prototype.getPathData = function() {
             const pathData = [];
 
             for (let i = 0; i < this.points.numberOfItems; i += 1) {

web/scripts/yak.js

@@ -53,10 +53,16 @@ async function ImageBitmap_from_Blob(blob, width = 1000, context = null) {
 
     ImageElement_resize(image, width);
 
-    return await window.createImageBitmap(image, {
-        resizeWidth: image.width,
-        resizeHeight: image.height,
-    });
+    // Workaround for Chrome: createImageBitmap with resizeWidth/resizeHeight
+    // options causes rendering issues in newer Chrome versions. Use canvas-based
+    // resizing instead.
+    const canvas = document.createElement("canvas");
+    canvas.width = image.width;
+    canvas.height = image.height;
+    const ctx = canvas.getContext("2d", { willReadFrequently: false });
+    ctx.drawImage(image, 0, 0, image.width, image.height);
+    
+    return await window.createImageBitmap(canvas);
 }
 
 /* Like window.createImageBitmap, but can deal with SVGs and a bunch of other