=== modified file 'src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.screen.js' --- src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.screen.js 2015-08-21 16:58:11 +0000 +++ src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.screen.js 2015-08-21 20:06:59 +0000 @@ -1497,18 +1497,36 @@ */ Window.prototype.drawImage = function(ctx, x, y, width, height, imgData, imgDataOffset) { - var img = ctx.createImageData(width, height); + /** + * Pixels must be returned as non-premultiplied alpha values according to: + * http://www.w3.org/TR/2dcontext/#pixel-manipulation + */ + var img = ctx.getImageData(this.origin.x + x, this.origin.y + y, width, height); var data = img.data; var pixelsInBytes = width * height * 4; - - for (var i = 0, j = imgDataOffset; i < pixelsInBytes; i += 4, j += 4) + var j = imgDataOffset; + for (var i = 0; i < pixelsInBytes; i += 4, j += 4) { - data[i] = imgData[j]; - data[i + 1] = imgData[j + 1]; - data[i + 2] = imgData[j + 2]; - data[i + 3] = imgData[j + 3]; - } - ctx.putImageData(img, this.origin.x + x, this.origin.y + y); + var alpha = imgData[j + 3]; + var gamma = (256 - alpha) * data[i + 3]; + var beta = gamma >> 8; + if (alpha == 255) + { + data[i] = imgData[j]; + data[i + 1] = imgData[j + 1]; + data[i + 2] = imgData[j + 2]; + data[i + 3] = imgData[j + 3]; + } + else if (alpha > 0) + { + /** server sends premultiplied image data */ + data[i] = (imgData[j] * alpha + data[i] * beta) >> 8; + data[i + 1] = (imgData[j + 1] * alpha + data[i + 1] * beta) >> 8; + data[i + 2] = (imgData[j + 2] * alpha + data[i + 2] * beta) >> 8; + data[i + 3] = (imgData[j + 3] * alpha + gamma) >> 8; + } + } + ctx.putImageData(img, this.origin.x + x, this.origin.y + y); }; /**