trying to repro a canvas / toImageUrl stress bug
HTML
<div class="outer"/>
CSS
.container {
overflow:hidden;
}
.container * {
float:left
}
JavaScript
function createColoredCanvas(heightWidth, red, green, blue) {
var canvas = document.createElement("canvas");
canvas.width = canvas.height = heightWidth;
var context = canvas.getContext('2d');
context.fillStyle = 'rgba(' + red + ',' + green + ',' + blue +',255)';
context.fillRect(0,0,heightWidth,heightWidth);
return canvas;
}
var errors = [];
function go(red,green,blue) {
var intermediateImage = document.createElement("img");
var sourceCanvas = createColoredCanvas(10, red,green,blue);
intermediateImage.src = sourceCanvas.toDataURL("image/webp", 0.95);
var targetCanvas = createColoredCanvas(10, 0,0,0);
targetCanvas.getContext('2d').drawImage(intermediateImage, 0,0);
var targetSample = targetCanvas.getContext('2d').getImageData(0,0,1,1).data;
function checkError(name, index, expected) {
if (Math.abs(targetSample[index] - expected) > 10) {
errors.push("expected " + name + " value of " + expected + " actually was" + targetSample[index]);
}
}
var container = document.createElement("div");
container.tagName = "container";
document.querySelector(".outer").appendChild(container);
container.appendChild(sourceCanvas);
container.appendChild(intermediateImage);
container.appendChild(targetCanvas);
checkError("red",0,red);
checkError("green",1,green);
checkError("blue",2,blue);
}
go(120,0,200);
go(0,120,200);
go(200,120,0);
go(200,0,120);
for(var i = 0; i < 255; i++) {
go(i,Math.floor(i/2),255 - i);
}
if (errors.length > 0) {
alert(errors.join("\n"));
}