Answer the question
In order to leave comments, you need to log in
In Canvas fill gradient (Chrome everything works IE 11 slows down) how to win?
Everything works in Chorme, but IE 11 slows down a lot.
How to overcome this programmatically without resorting to creating a gradient through the image.
Only software.
About IE:
Here is the code ( link to fiddle ):
let sz = 80;
let cnv = createCanvasSize(sz,sz);
createGragientSL(cnv.ctx, sz, sz);
document.body.appendChild(cnv);
function createGragientSL(ctx, w, h) {
const accur = w;
const wCol = w / accur;
let grd = ctx.createLinearGradient(0, 0, 0, h);
for (let i = 0; i <= accur - 1; i++) {
let alpha = 1 - 1 / accur * i;
let colorA = 'rgba(255,255,255,' + alpha + ')';
grd.addColorStop(0, colorA);
let colorB = 'rgba(0,0,0,' + alpha + ')';
grd.addColorStop(1, colorB);
ctx.fillStyle = grd;
ctx.fillRect(wCol * i, 0, (wCol), h);
}
}
function createCanvasSize(width, height, className) {
let node = document.createElement('canvas');
if (className) node.classList.add(className);
node.width = width;
node.height = height;
node.ctx = node.getContext('2d');
return node;
}
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question