S
S
sozercanie_kosmosa2018-12-02 20:55:32
JavaScript
sozercanie_kosmosa, 2018-12-02 20:55:32

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:
5c041a6a56999202191585.png
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;
}

ps: fiddle in IE doesn't work.

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question