Pattern upscaling StackOverflow

Sample code exhibiting different behaviors for pattern upscaling in IE/Edge, Firefox and Chrome

by ozirus

CSS

html {
  background-color: red;
}

JavaScript

var textureCanvas = document.createElement("canvas");
textureCanvas.width = 2;
textureCanvas.height = 1;
var textureContext = textureCanvas.getContext("2d");
var imgData = textureContext.createImageData(2, 1);
imgData.data[0] = 0;
imgData.data[1] = 0;
imgData.data[2] = 0;
imgData.data[3] = 255;
imgData.data[4] = 255;
imgData.data[5] = 255;
imgData.data[6] = 255;
imgData.data[7] = 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.fillStyle = ctx.createPattern(textureCanvas, "no-repeat");;
ctx.rect(0, 0, 2, 1);
ctx.fill("evenodd");