Answer the question
In order to leave comments, you need to log in
Canvas gradient fill in Chrome works in IE 11 freezes, 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 ):
<html><head></head><body><script>
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;
}
</script></body></html>
Answer the question
In order to leave comments, you need to log in
Do it through Uint8ClampedArray and manually set colors and transparency there, then insert it. What you wrote will slow down always and everywhere:
let ctx = canvas.getContext('2d')
let data = ctx.createImageData(screenWidth, screenHeight)
for (var i = 0; i < data.length; i += 4) {
data[i] = // red
data[i + 1] = // green
data[i + 2] = // blue
data[i + 3] = // opacity
}
ctx.putImageData(data, 0, 0)
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question