I'm trying to put a transparent gradient to modify a series of canvas but IE11 seems to be remembering all the gradients and sum one upon the other instead of considering each a totally different gradient on a totally different canvas.
Even refreshing the page doesn't work, I have to close IE11 or open the same page in another tab to reset the canvas gradients.
The same code works fine on IE9, IE 10 and any other browser.
Here is a minimum demonstration: It creates an initial canvas and everytime you click on the canvas it creates another new canvas, which should be identical since it's using the very same code. But they aren't.
function clickBlock() {
var div = document.createElement('div');
var width = 80;
var height = 80;
var canvas = document.createElement('
canvas.setAttribute("width", width);
canvas.setAttribute("height", height);
div.setAttribute("onclick","
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FFF000";
ctx.fillRect(0,0,width,height)
var gradient = ctx.createRadialGradient(
gradient.addColorStop(0,'rgba(
gradient.addColorStop(1,'rgba(
ctx.fillStyle = gradient;
ctx.arc(width/2,height/2,
ctx.fill();
div.appendChild(canvas);
document.body.appendChild(div)
}
clickBlock()