Is it possible to control canvas texture upscale behavior? - html

Question

When upscaling a texture in canvas, the behavior differs greatly across browsers.
Here is a fiddle creating a 2x1 texture (composed of one black and one white texel) and applying it on a 256x128px rectangle: https://jsfiddle.net/ozirus/x1c3m50o/
var texture = ...
var ctx = document.createElement("canvas").getContext("2d");
ctx.canvas.width = 512;
ctx.canvas.height = 512;
document.body.appendChild(ctx.canvas);
ctx.setTransform(128, 0, 0, 128, 0, 0);
ctx.fillStyle = ctx.createPattern(texture, "no-repeat");;
ctx.rect(0, 0, 2, 1);
ctx.fill("evenodd");
The following screenshots showcase the results when run in different browsers.
In Chrome:
In Firefox:
In IE11/Edge:
Are there any flags/options available to control this behavior and make it more consistent?
The IE/Edge behavior where the last pixels are the result of a wrapping/repeating interpolation is the major issue I'm actually trying to solve.
PS: I am aware of some workarounds that could do the trick (half texel offset + scale up, transparent border on textures, ...) but I'd rather configure this behavior if possible.
EDIT: as pointed out by #Ryan in the comments, CanvasRenderingContext2D.imageSmoothingEnabled property can be used to have matching behaviors in nearest neighbour mode but I want to keep smooth interpolation of the textures

Answer 1

No.
No there is no way to access the code behind the 2D API (CPU and GPU) from javascript. The standard has many holes and thus browser developers are left to interpret it however it suits them.
If you use "repeat" you will get the same result as "no-repeat" on Edge on all 3 browsers.
On Edge, Firefox and Chrome with
ctx.fillStyle = ctx.createPattern(textureCanvas, "repeat");;
If you want the result to be like FF then use ctx.drawImage to render the bitmap. If you want irregular shapes then render using the ctx.drawImage then mask with a path and ctx.globalCompositeOperation = "destination-in". If you need to render to existing canvas content then use a second canvas to render the bitmaps and masks and then render that canvas onto the existing content.
On Edge, Firefox and Chrome with
ctx.drawImage(textureCanvas,0,1,2,1);
If you want the same result as Chrome on all 3 browsers you need to add a one pixel transparent border around the image and then render the 2 pixel center.
Same result on Firefox, Edge and chrome in example below (copied and modified from your fiddle https://jsfiddle.net/ozirus/x1c3m50o/)
var textureCanvas = document.createElement("canvas");
textureCanvas.width = 4;
textureCanvas.height = 3;
var textureContext = textureCanvas.getContext("2d");
var imgData = textureContext.createImageData(4, 3);
var i = 20;
imgData.data[i++] = 0;
imgData.data[i++] = 0;
imgData.data[i++] = 0;
imgData.data[i++] = 255;
imgData.data[i++] = 255;
imgData.data[i++] = 255;
imgData.data[i++] = 255;
imgData.data[i++] = 255;
textureContext.putImageData(imgData, 0, 0);
var ctx = document.createElement("canvas").getContext("2d");
ctx.canvas.width = 512;
ctx.canvas.height = 512;
document.body.appendChild(ctx.canvas);
ctx.setTransform(128, 0, 0, 128, 0, 0);
ctx.drawImage(textureCanvas,1,1,2,1,0,0,2,1);
html {
background-color: red;
}
Yes.
So I guess that means you can control it, but indirectly using different techniques.