Unlike Chrome, Firefox will happily keep alpha data in memory, but when you request JPEG (which has no alpha channel) it seems to fill transparent areas with black unless you explicitly give it a background. That’s why PNG/WebP look “transparent” and JPEG goes “black.”

You can work around it by painting a background before drawing your image:

var canvas = document.createElement('canvas'); canvas.width = width; canvas.height = avail_height; var ctx = canvas.getContext('2d');

// Fill white background for JPEG export ctx.fillStyle = '#fff'; ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.drawImage(imgsrc, 0, 0, width, avail_height);

img.src = canvas.toDataURL('image/jpeg', 0.92); If you need the transparency for PNG/WebP, you can skip the fillRect for those formats.

Also worth checking — if your source image is cross-origin and you haven’t set img.crossOrigin = 'anonymous' before loading, Firefox will block pixel access and toDataURL() can return empty/black results. That one trips people up a lot when coming from Chrome, since Chrome can be a bit more forgiving.

So in short:

Set a solid background before exporting to JPEG.

Make sure crossOrigin is set if you’re pulling images from another domain.

Thanks! No effect from the changes, jpeg is still black if I do the resize. The image comes from the same server as the page, load code shown below.

Live version:

   http://phobrain.com/pr/home/view.html

The image content displays if I skip the resize:

   //img.src = imgsrc.src;

vs.

   ...
   context.drawImage( imgsrc, 0, 0, canvas.width, canvas.height);
   img.src = canvas.toDataURL('image/jpeg', 0.92);

Inspecting the resized image shows it seems empty, with this repeating pattern:

Pn6/9oADAMBAAIRAxEAPwD8qqACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKAC...

The request/receipt of the image:

   function nextImage(...) {
       ...
       var newimg = new Image();
       newimg.onerror=function(evt) {...}

       newimg.onload=function() {
           // ... logged dimensions correct 
           imgRcvd[screen] = newimg;
       }
       newimg.src = url + params;
       // "/pr/getmext?sess=rLhF5WBH&sc1=2&sc2=2&d=0&c=l..."
   }

Thanks! That doesn't fix it. The image (from same sever as the page) displays ok as long as I don't rescale it with the canvas/context. If there were another way to size it to fit, I could try that.

Thanks! That doesn't fix it. The image (from same server as the page) displays ok as long as I don't rescale it with the canvas/context. If there were another way to size it to fit, I could try that.

Thanks! That doesn't fix it. The image (from same sever as the page) displays ok as long as I don't rescale it with the canvas/context. If there were another way to size it to fit, I could try that.

This thread is very hard to follow. Please link to an online demo, such as a lived page, CodePen or JSFiddle, so people can see what you are doing.

Maybe I'll start a new thread since someone trashed it. I can avoid FF since it works on Chrome and Safari..

I posted a URL, but that triggered a review.

I guess this 'solves' this one.

Restated:

https://support.mozilla.org/en-US/questions/1529145