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

when upscaling texture in canvas, behavior differs across browsers.

here fiddle creating 2x1 texture (composed of 1 black , 1 white texel) , applying on 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 results when run in different browsers.

in chrome:

in firefox:

in ie11/edge:

are there flags/options available control behavior , make more consistent?

the ie/edge behavior last pixels result of wrapping/repeating interpolation major issue i'm trying solve.

ps: aware of workarounds trick (half texel offset + scale up, transparent border on textures, ...) i'd rather configure behavior if possible.

edit: pointed out @ryan in comments, canvasrenderingcontext2d.imagesmoothingenabled property can used have matching behaviors in nearest neighbour mode want keep smooth interpolation of textures

no.

no there no way access code behind 2d api (cpu , gpu) javascript. standard has many holes , browser developers left interpret suits them.

if use "repeat" same result "no-repeat" on edge on 3 browsers.

on edge, firefox , chrome

ctx.fillstyle = ctx.createpattern(texturecanvas, "repeat");; 

if want result ff use ctx.drawimage render bitmap. if want irregular shapes render using ctx.drawimage mask path , ctx.globalcompositeoperation = "destination-in". if need render existing canvas content use second canvas render bitmaps , masks , render canvas onto existing content.

on edge, firefox , chrome

ctx.drawimage(texturecanvas,0,1,2,1); 

if want same result chrome on 3 browsers need add 1 pixel transparent border around image , render 2 pixel center.

same result on firefox, edge , chrome in example below (copied , modified 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 = 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 guess means can control it, indirectly using different techniques.