1123225 - canvas to data URI saves white as transparent

Status: RESOLVED WORKSFORME

(Core :: Graphics: Canvas2D, defect)

Description

[tcaudilllg]

User Agent: Mozilla/5.0 (Windows NT 5.1; rv:35.0) Gecko/20100101 Firefox/35.0
Build ID: 20150108202552

Steps to reproduce:

I drew white ('canvas.getContext("2d").fillStyle: rgb(255,255,255)') on a blank canvas and saved it as a data URI/PNG. Then, I loaded the image using FileReader API and drew it to a blank canvas using drawImage().


Actual results:

The white areas were not drawn to the canvas, and the places where they should have been remained transparent.


Expected results:

The white areas should have been drawn on the canvas.

Comment 1

[:Gijs (he/him)]

Did you also call fillRect or some other API to actually do the filling of the canvas?

I wrote you a small testcase:

http://jsbin.com/tetejifeba/1/edit?html,js,output

Which seems to work fine. (I didn't use filereader since your description didn't make it seem necessary to reproduce the issue)

If you have a broken testcase that does use fillRect, please attach it or link to it.

Comment 2

[tcaudilllg]

I did not. Instead I used getImageData to do the fill. I'm making a drawing program. The palette is not generated algorithmically, but is a pre-created image drawn to a canvas. I use getImageData to take the data of the pixel the mouse is positioned over and assign its components to the fill style of the canvas (here's the code):


function setColor (event) {

    var x = event.layerX; // Mouse X coord
    var y = event.layerY; // Mouse Y coord
	
	selectedColor = Palette.context.getImageData(x, y, 1, 1);
	if ((selectedColor.data[0] == 255) && (selectedColor.data[1] == 255) && (selectedColor.data[2] == 255)) {
		selectedColor.data[0] = 254;
		selectedColor.data[1] = 254;
		selectedColor.data[2] = 254;
	}
	SpriteCanvas.originCanvas.context.fillStyle = "rgba(" + selectedColor.data[0] + "," + selectedColor.data[1] + "," + selectedColor.data[2] + ", " + selectedColor.data[3] + ")";
	PenColor.context.fillStyle = SpriteCanvas.originCanvas.context.fillStyle;
	PenColor.context.fillRect(0, 0, PenColor.width, PenColor.height);
	PenColor.red = selectedColor.data[0];
	PenColor.green = selectedColor.data[1];
	PenColor.blue = selectedColor.data[2];
	PenColor.alpha = selectedColor.data[3];
}


And I use this line to write the pixel.

SpriteCanvas.originCanvas.context.fillRect(pixel.x, pixel.y, 1, 1);

I then copy this canvas to another canvas that is scaled by the zoom factor. It's the scaled canvas' content that is actually saved as the data URI. However, there are no artifacts because I have disabled all the interpolation features.


function rescale (target) {

    target.context.imageSmoothingEnabled = false;
    target.context.mozImageSmoothingEnabled = false;
    target.context.webkitImageSmoothingEnabled = false;

    target.context.drawImage(target.originCanvas, 0, 0, target.width, target.height);

    target.context.imageSmoothingEnabled = false;
    target.context.mozImageSmoothingEnabled = false;
    target.context.webkitImageSmoothingEnabled = false;
}


I click on a solid RGB white pixel on the palette canvas and draw with its color, and it's white on the canvas, but when I save it and reload it the white is always turned to transparent. Because of this, I can't do a simple operation like scale a palette to make it bigger, because the white turns transparent. I can do a fix that turns solid white to 254,254,254 in terms of the pen, but that's all.

Comment 3

[:Gijs (he/him)]

Is your testcase online somewhere, or can you upload an archive with the files? Because right now it's really not possible for us to reproduce and then debug this. (I'm assuming that the testcase I added works fine for you, too)

Comment 4

[tcaudilllg]

http://gamestargcs.net/gamestar-gcs.xpi. Install the XPI and click the Sprite tab. That's the editor.

Comment 5

[tcaudilllg]

The example you showed me wasn't capable of downloading a data URI to my browser. I didn't get the tab with the image juxtaposed in the center on the dark grey background.

Comment 6

[tcaudilllg]

I saved the canvas in the fiddle to disk with a right click. It loaded in the editor OK. I notice you use the explicit declaration 'white' instead of rgba(255,255,255,255). I tried that and was still able to sample color from the output canvas.

-- Nevermind. I think it was fixed in the last version of Firefox. It would have to have been, because I'm not having the same issues now that I was previously.

Comment 7

[:Gijs (he/him)]

(In reply to tcaudilllg from comment #4)
> http://gamestargcs.net/gamestar-gcs.xpi. Install the XPI and click the
> Sprite tab. That's the editor.

I can reproduce with this on 35 by just drawing on a frame and then saving the frame to PNG, but I see that that image is already transparent. In fact, if you set a colored background on the table that contains the canvas, you can see that the canvas is transparent - it is never filled with white. (Or am I meant to use the buttons to do that? I'm not sure how...)

In any case, it sounds like you're working it out. Please reopen with, ideally, a smaller testcase of what exactly we're doing wrong if you run into a Firefox bug.