Html canvas, pixel manipulation and alpha channel - html

Question

In html canvas, what I want to achieve is a white noise effect on a picture. So I get the picture, get its ImageData, modify it's alpha and draw it back.
var bat = new Image();
bat.src = "data:image/png;base64,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"
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
canvas.width = 250;
canvas.height = 250;
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(bat, 0, 0);
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var data = imageData.data;
for (let i = 0; i < data.length; i += 4) {
if (data[i] != 0 || data[i + 1] != 0 || data[i + 2] != 0) {
data[i + 3] = Math.floor(Math.random() * 255);
}
}
ctx.putImageData(imageData, 0, 0);
requestAnimationFrame(animate);
}
animate();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bat</title>
<link rel="stylesheet" href="style.css" />
<style>
#main {
display: flex;
flex-direction: row;
}
#canvas {
border: 1px solid black;
width: 150px;
height: 150px;
}
</style>
</head>
<body>
<div id="main">
<canvas id="canvas"></canvas>
<br />
</div>
<script src="script.js"></script>
</body>
</html>
The result is what I need. But the issue is that when you use putImageData, even if the alpha is 0, it won't be transparent.
So I use a temporary canvas, draw the picture on it, modify it and then draw it back on the canvas.
var bat = new Image();
bat.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAF6VJREFUeNrt3VmsJNddx/Hvv7Ze7jrjsWNPbLzg2AQbghIkQIKwJjEEBRCRkLD8ACgQyMLOAy+8gIIiVrGDAkoAAQkQQJAEB4IgCWCckAUcE6EsGHtsz3bnrr1U1Tk81J2MHTF1zp1U36Xv7yNd+cE1tXXVr6v7/Pt/QERERERERERERERERERERERERERERERERERERERERERERERERERERA6C6RTMVAJ8B3AK8B2sLwUeBR485Mf9BcDLgLqj9Tngj4A1XVJylGTAe4AKKDv4q4FfPQLH/Upg1OFxnwHu1OU0mwtUZquieefucn2HXU3zrp12uD5/BI77yEl0CkQUACKiABARBYCIKABERAEgIgoAEZk3qgO4NvcBLyc8Jm+D4cJJs8TRErbee8ajbbw/XkPdvf6QXn9IcIjf+3J7a+Mn6rra5urVqwasAz9LU4QkCoCZuQf4gd2buvXqzbJ8mqa5tV/fjvFoh+NW65IXBcOFhWDwee9P72xvfg/hJ9b/BH5Ol6cCYNYuV7olhH9P0Qvf2P7Y3fy7dzZ+9y8QAL3INR6FKslDRd8BiCgAREQBICIKABFRAIiIAkBEFAAiogAQkfmhQqAZS5KUJG3vjOWc0dQTHa9iIOccVVmGS6AjioVEASBHjieuClI3/6zoI4CIAkBEFAAiogAQEQWAiCgAREQBICJzR3UAM2ZmmFlwmcg6IAcsArce4teuBG5Ag/cKADGSNCPN8valnIutA3Q0zUhfdsgPPKZVmigA5Bperxt1GqQr+g5ARAEgIgoAEVEAiIgCQEQUACKiABCRuaM6ADkw3hM1NyBqB6YAmGdmxmBhsdO+d1mWkwUqEC8bj3ZwznV6PJZY4J72LC4uM4w4bu89W5vr1LWuFQXAnAbA4tJqdyv0nsFwgcFwIerdde3iOaqqu4l1LUlI0ywcAEvLLCwuRQXA2aeeaH5lIAqAedRp19tnTLsd23F3FtsPHa+Pnx5cF8iM6EtAEQWAiCgAREQBICIKABFRAIjIvNIw4LWLbHkVM/fdjDa9J+F9jB2NM39g8/2pDZlO2OfkBcADQFvNmesPhncVRf+lNA06W62cPEWadZizkWP23rnOx89DsxxfuarCjVAB8jy2WtGzubGOay8F9HVdfeDcU0/8k3MuVDOYAf8KvO24X/B6Ani2W4EfAAa0vEWlWT4dLi4lMTdYbzAIVsXt7f73+OD1bYxH20zGOxBxIy4urUbd3NkegszHHUx0CfLK6slQqFhZTr/g3NNnXkT4jc2AX1QAKAA+m9v9I3AR9aKr55pfvHS3h9Hrsmf8dbOPB1mRF3euWdrD57IK0ZeAIgoAEVEAiIgCQEQUACKiABARBYCIzB/VAcxY19124tbX/H9L4vLdE1ld2HEdQEy1oCgADh3naqqqjLohtjbWD+RCz4seC0vLUcuOd7Y7bQoax9MfLNAbDNX1VwFwxHiiq+eccwf2TpckKTFFuW4PJbndncPmqcOY0c+CJO4a0SkQUQCIiAJARBQAIqIAEBEFgIjMKQ0Dzph3Dt/hMKBFttuahS6HCjufjkwUAIeNmXHzLTfT6/U6W9/m5hZnz55tDQHvPUli5Fka20knuFyaptx66+eRJN08NBqwPZowGk1iupZFbVeBogA4VNI05U2/81vce+891B3MbV0UBW9925/ymtf+IHne3kxzcTDg1MnVqIk319cuUFdl6zInT9zAX/3Fn7GystLJuSmKgp/+mTfwS7/8q/R6RTAullZWSQN9C2tXq6hIAXB4GFD0Coo8x+d5J+vL8yJ64diPCjFLmUGv16ff73d2btI0xfuI7sX6ycDM6EtAEQWAiCgAREQBICIKABFRAIiIAkBE5o7qAGbMPuu/Xa0vvFz3JcPGAQ7JG+GJTtVjUAFwmDjveduf/hnvP/0vwTr6mFLXNE358Ec+Sr8/JE3bl59Mp1y4cDFYGee9x/nL7cOubjye8ntvfguDQTeFQFmW8eEPfyRY3be7k0zH4+A5qqtK/QX3SJH5bN8M/DGw0LbQYLjIcGExqvZ8WsY0D7Vgae/lG6HXH7AY0exzMh4xmYyiXuKYJwXvPaPRTqf19kVRxFc2RvVfrLlw7mm8D/5oyQM/B/zEcb/g9QQwY0VUCbCRRZYKZ1nkS2aGWXdf8ZjFHku8JObd/5k70MUy8uzXQKdARAEgIgoAEVEAiIgCQEQUACIypzQMOGNl7SKGsA1ncQ03vdUkVbi92LSqmVZ1p8dSVd3OH5hbQqK3IAXAvEoT4/UvfQGnVxdwgRSwJGZM3JPkffJhuBCoritc3WEAeEc92uis0i5LjHf+5xP8w389RZaEx++bY2nfdlNtqUpABcAhYWZ824s+ny+65SS16+LC9FgxxIYr+38w3uE2zoPv5ikgy1KeWJ/wdx87QxYRfjG9A/d/inMFgASUdfMo3lkAJDXW8aN9dABUdWcBoBv2cNAnMBEFgIgoAEREASAiCgARUQCIiAJARObOYawDyHf/uizpGjMXJWJGVddMx9P937J39IifcFS9+RQA1+o7gdcBVUfruwDcD1w66i9WkaX8+UOP8iNveQ9Zun8Pbx64fnmBd/z0q1gehpqCGr4c4UebursUANdkGXhBh/v2Meboo872ZMITFy7t+3YnZYkjgWDZroElu7GhHn2H3XH4DsCjX4iIHNsAEBEFgIgoAEREASAiCgCRY00NQa7N5VGF4DiXme3+BVY4R4Uzhu1O02Wt52UGU3ntZexRY5T7HAAD4Drah+TKPC/6aZaVZhbct8l41HVXmRHwSGAf8d4VdV3dCSy1LefwPHVpm+V+3toTMEmMG1eGJBE3xEKv4Lknlg6kECjBgWvvRmRmbE0mnL+w1Vo1WGQJm6Mp5ome+DMQkt4790ngfOR1f1G3//6m4EuB3whs0z7v9rvOPv+LX3Szc+50+6vteei972ZzfS203UeArwLWIvYxBXqBAJia2Q8DbyAQoAZcf+r61pl/PXDdYp93/tjLWR32gjtYOcek3P+WYGbGoMiDb9pFlvC2hz/Fj//xv5IHpzAvmZRlRAJ5NtbXqOtgceiHgJd577ciDqkG9r+m+pDZzyeAFLgBWGxbKC96t6VpjllNKABmkF41sBO+Hn1UmbIHxmVN6a11meG0ii6dz5KErHdQX934cEmV99S1Y2daBQPA1fFPb9772I9JY5onOYmgLwFFFAAiogAQEQWAiCgAREQBICIKABGZO/tZB2BEBI6ZkURNFulnUUoaK33GsQSm/bWRmQ1oKYAyM4ospchSjrosS0iTyNfF4noM+mZcv4i4flTavs8BUACvoKmea+MWl1ZuPXXDTU9neXF7652VZnzyvx+JCoDpZByzjz3glYQLfFLgk8D7Itb5IeCNhPsW2nQyfklVJl/aFgDrvuQP3v9fDHv5gVwEliR0VRSaJsYHP32BLE1JAkFQTidMJ6Pgtr33T3vv/wLYDCy8CZRI/Gv/Of771d0b5s7Qdk7fctva133TK+u2Et80TfnIB97PRz/wz10e4w7NO0foWBPgTcD3d7jtDHgH8JLWk2MJw+UTmB3MJ7I0y+O7/cYcdJpSFO1hZmasr51na+NSzCofB74G+IRu2W59rk8AnqZ8NljEnqb5c1xdt/54xwDvOv9V3HAPy1YcALOmhv7gAiDpNAAs0Q/tjgp9CSiiABARBYCIKABERAEgIgoAEZlXqpw6YpyHquOOYCk+WFRpQJ4d2PCexhWPegA455hOp/iWOoA6TanruKvbzLj7nheysLjU2iqqqko+9pGHqapOC8S+Gvh6wnUDSb8/XLXEHC1PW2ZGkmbBsfjawQvuSPiWr8jpshdqki9h1l6GvD12/PZfrzGeRtRpeI+LeB17/SFpmkWszo+3t9a/r66qmErA36BpCyaHKQC8d1RV2RoAiXc4F/n2ZsYddz2fk6ee0xoAk/GIjz/yoa4D4EuBn9y9qVvviLzojdO0/a3TzEiTNPjbhsrB856b8+pv6tNdX1Aj6a1ASxNmMzh3qebNf3spKgCa/n3hHSyKHv3BMGZ9N+5sb/wQTbl2m4/RVHMqAA5bAMxCXTvqur1ddOwTxV43zZUe9KGO/8MuJyd2zjMpfacfA5LE0/TnvlpEwLT0nU+x7Ilr9Om9X4j8FFCimaD39trrFIgoAEREASAiCgARUQCIiAJARBQAIjJvDl0dQGLWdA9N22s+zBKcq6nrqnUs2bmafr9PqEmNc85NJpOaptik7bxMLVQ29wzeEzXWXeThHqeJNX/jabgOIEubvxiT0uFp79Q0LR1FZvTy8Hh87aCqYyoGia0DaAou4roW9bz3MbP+OtQ/cD9LgWum4zHet9ew3nLb8zh9yx1RF8V/fPCf2drcaL0wVldXefe7H+TE6mpoff/9wAMPfPqhhx56L02hz1UX7fWHw15/MAKWQvu5vbURLIs9sZjwu68xlhcseFP/40e3+LJXj2jLx2kFr31Fn1d9Y59poFi5quG7fv5xPnHGkSRXvU85sZjxWz/6fBYG7amSZ8a7Ht7hjX+yRpZe/XjMjK2NS2xvrkfc2MbS8mroTcE75xYuXTz39ohaoAx4O01jVwXAvvBxUzznRY9BHu6O671jNNpha3O9dblekXH7bbdx6tSp0CrvfP3rX/+G+++/vx9a0Mx8lmWR714x5c2em085Tiy2fyIrMngoq3ns7DS4vrXNDHDBfXQOHj875tNPte/j9omCm6/PWF3MAvtoXL/SlDW33dhm9pknuIjzjaUJaZa1L1bXdwJ3RV6R70MO30eAPZSHdr3pNImZkGD3Yut64843f8FlDvC1id3HA6vFtejvtDwqGQb0JaCIAkBEFAAiogAQEQWAiMy9LkYBYr8Rv/zNq0Ln/zuJFi4EMos/2ZfXF7PO2JV2vY9y9APA00zcGBqYtul0sjna2boRuLttwTTNQuO9zYa9J88Lev1B63hzXvQ4c+ZJxuP2LlFFUbC2tgYQmJ68GT2qa0fUSFLEIs7D2UswCdSl5RmMS+PkUtJa5VdWTTXe4+dryohCoOVhwqkVf9VqSQ+cXDLOXaoYT0P7aKxvu85DwNcOZ+21Cs450jTF++B7jPP4nqvr64CupmT2wAUOaH7Ja2Ud/PthxHrKJE3vM7M3G7bSxV6ZGS/68q9laWW1vSloOeWjH3gfVRmuDk3SjCzvB7e7vbXBzvZm3Nz2EfUKSZJw043XkSRJ8Gb96nsdr3t5Te3ag+JN7xzz+383IQ9kaZbCr7xmkdtvTFvH+Nd3jJ/8wwW2JxGlwN4o6zR4HvcwO3DUxKlJmnL9Dad3pztv3fZoe2vjsfW189El3RG2gG8F/ucoBUAXTwDbMQu6up4SbuoYnzxmJGlKluWB3wI4tjY3mU4nwXX2+gOWiyFtb9vPvOm7LEbamYQfr8sa6tpYHFjrbwGKrPkNwqR0TMr2leYp9ApjYWBX7TRswLQ2tseOrXE4ACxJSLu8tSBYQt4sZJAkMQEwsCS5u+N76X85gh9v9Xlc5BhTAIgoAEREASAiCgARUQCIiAJARObVfjYESbhSB9DJALrBWpKkq76l9CuJmHTzyvosWNxjZrG96WbCkqbQp20X8tx223v5mIMmS5p6AGdXXYT8SLxVWNTrY7t9J2V/A+Ax4NfosKnNE49/6vnrly7eR8uTTF3X9Ht98ojyYrOE0c5WcLmqqoJNSy9zzjVVOR1IDJ44D3/5UNI6PXiWwqfO5qT5MNgYNE3gnx7N+fhTSetu7kyM2ickSUQh0AwCsuj1o27sna24Cs2ynJJGtZ7z0a+fd+5l3vvztNeyjoF3cUgakh7lIEyBdwAvbb1pkpSbTj+XULcvM2N7e4sL58+GN5znUb9XACgnk9Yp0Zt9TFg5cV1Uuav3tJYBX1mnkcS+ukkWvBTMjKLI6ere3lMpsBkrq9eRpu3n3DnH+tq5qArNNM/Je72Ymzq24nOrHI/Nt/8QwYBHgRfTlA4fuCM9PThRTxM+qhlpc3Md/jZxZrHtvuOPJU3iPiXZgb5dxLTxO9DXb7G7a3b/6EtAkWNMASCiABARBYCIKABERAEgInPuqA8DRthDddgBjXN5D9PSY9bdMFaWGmkadzyhmYYvc3s6PT5wvuPqGZpXkOjXUBQAn3VzOdYvXQpeHN57FpaWufdLvqy1HsDMOPf0Gc6dPRN3wUXUFgz7xo98+wLDfsQDmWVY2g/e/A8+dJH3fLB9hl5oagDu//ohp1baKwGTxFhZ7sUds+VR+/hX/7jNex6OOYWe0c52VKFUTHUfNG3LQgVasKdCoKYVWXjZRe/cDxOuBEyBfwfeqQD4nALAs7W1EbXs6nXXc/cXvbAp373ajZCmVB+qePrJ/+1sHweF8d339Tm5FKrw8Vg6IMnb+6r2ioSz5zd48F+2qQIVfnkG970w466b09by4jRJOP2cNKIU2GNpDytWaHsK6BUJjz1xLioAACbjUfgGNKM3HEZVLHnv4wIgsojsmfsQcKuHn4pZFfALCoB9DgtX160BcHm5jrdMWXqmZbjSzZzHIirirjzWW2hRqrppJd522C6BaQVJzEOKv/xxpuVJCk/tjuUEvf3I5Tz70GJcXwKKHGMKABEFgIgoAEREASAiCgARUQCIyLw66nUAE+AM3XRZsXI6vVDX9dB7d2f7os34dRIxKO5iik1oxtinEaO+CZBn7ePnV+oUYspnd+sA6kAdgI+vA0iBLIuopTiWZQAKgK444HVAj24uperSxXMv/vu/eesvtvUP9M5x0y238VUveUWwksx7z4f/7b1sByoR17c9D7xxgywNTw/+lfds8OpvfLq1jr7IoK49iydupAi8wmbwhrcnweWa8AlXVFY1vPjeDb73vsA+5sbW5nr0i1P0+8FZfyEucC+/Nl2XAru65qg5ygHgaaZk7sx0OlmbTidRlVrLyydwrg5ePDHdg2sHn3yyDv4YqKzhjud4qrJu/wGPA+9z8iwnpnfpk2tRdwxVGX5EKSt43k3hfTRn1Hu4YSxi2m8AfwRvQgXAUUseH1cjHttS2mgerUNl5IknvtPvHkSt0+Ie//cwDYMcAvoSUEQBICIKABFRAIiIAkBE5pxGAa7NlUqbA2CBDRsHP+njUdjHGVwTXR/SzE+RAuDZJsAnaC8sssl4dHE83rnLe3+69YrwrtPuQUZTjXdxE6qWGpY8hVEJRDcZjRwHjLwepxVc3LLWOoA8s2Yf58cF4Em6m/svAzZmvdMasf2s6xIYBgJgmqbZa83sZ8ysCK2wqspgCJglLK+ciGq4mWfGoBf+5BZbWgyQZnmnHXWzFPp56JiNCxcucWl9M+6F6fej9jG2Gm8GlYCPAS8HPk03H60NmAIjZkhPAM9WAsH61LquKg7o+5Oqhq3x4T6JVQ1bdbiF97Seq/cfA7Y5JNN+x9KXgCLHmAJARAEgIgoAEVEAiIgCQEQUACIyr1QHcG1SroRnqEqkoikw2l97KOyJnRq9+zkRRQFwND0C/DrhyRsN+AbgC+mo6tI3d2Jwuboqo6viqmQaDAwzI8+L6P0MBopZ1HFc5uq605CKnfV33iNPAXBt3rX7F3N+3wHc09mWoy5cYzoeMx7vdLZZSxKWl+PKlc0s2L/PzKIbeALUZdwPB2J6MH4mAJzjuNN3ACIKABFRAIiIAkBEFAAiogAQEQWAiMwd1QEcBpfb7XXWlsumNN2Nep3to8eDTTBbDG8+ZlZi28vhTmjerCy4l01x1qCjo66AmqbyMyTlCLbYUwAcBt4z3tnpsi9fWdfVW4GHIy/emJ0cjMfb32PY3eEAIOpYynIau/ELwG8CFwM32YJ37vuA27s6j8CfAP8WcR7r3f0T+YwMeJDmnWk//0rgNR0fyyng0QM4lsuzQH9+xD7eAHy8w+1OgVfN8wWq7wBEjjEFgIgCQEQUACKiABARBYCIKABERAEgInNHlYCzVwJP09200TFSZtPObkwzBfZ+20tvs1GH+5gw520BNT347M/vbXRZkx+/3bM0JbRdyWhKbFP2nwc+RVOZF9rHO+juydZowlslviIiIiIiIiIiIiIiIiIiIiIicnj9H4sN/dXJWD5iAAAAEnRFWHRFWElGOk9yaWVudGF0aW9uADGEWOzvAAAAAElFTkSuQmCC";
var canvas2 = document.getElementById('canvas2');
var ctx2 = canvas2.getContext('2d');
var tempCanvas = document.createElement('canvas');
var tempContext = tempCanvas.getContext('2d');
canvas2.width = 250;
canvas2.height = 250;
tempCanvas.width = 250;
tempCanvas.height = 250;
var img = new Image();
var alpha = 0;
function animate2() {
alpha += 0.1;
ctx2.clearRect(0, 0, canvas.width, canvas.height);
ctx2.fillStyle = 'blue';
ctx2.fillRect(0, 0, 250, 250);
tempContext.drawImage(bat, 0, 0);
var imageData = tempContext.getImageData(
0,
0,
tempCanvas.width,
tempCanvas.height
);
var data = imageData.data;
for (let i = 0; i < data.length; i += 4) {
if (data[i] != 0 || data[i + 1] != 0 || data[i + 2] != 0) {
//data[i + 3] = Math.floor(Math.random() * 255);
data[i + 3] = 123;
//data[i + 3] = alpha;
}
}
tempContext.putImageData(imageData, 0, 0);
img.src = tempCanvas.toDataURL('image/png');
ctx2.drawImage(img, 0, 0);
requestAnimationFrame(animate2);
}
animate2();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bat</title>
<link rel="stylesheet" href="style.css" />
<style>
#main {
display: flex;
flex-direction: row;
}
#canvas2 {
border: 1px solid black;
width: 150px;
height: 150px;
}
</style>
</head>
<body>
<div id="main">
<canvas id="canvas"></canvas>
<br />
<canvas id="canvas2"></canvas>
</div>
<script src="script.js"></script>
</body>
</html>
But whenever I want to change the alpha randomly with:
data[i + 3] = Math.floor(Math.random() * 255);
The picture won't display. And if I want to update the alpha other time with:
var alpha = 0;
alpha += 0.1
data[i + 3] = alpha;
The picture flickers...
What is the correct way to get my "white noise" picture that would be transparent so I can see the background through it?
Here is a link of a stackblitz with the demo in it.

Answer 1

First, don't call getImageData every frame. All you need is to know where the black pixels are in the image, these won't change so you can keep the same ImageData object all along, avoid slow read-backs from the GPU.
Then, you can drawImage() a canvas directly. No need to go through a new Image with a toDataURL() which will load your image async and indeed make your animation flicker.
So this would give:
var bat = new Image();
bat.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAF6VJREFUeNrt3VmsJNddx/Hvv7Ze7jrjsWNPbLzg2AQbghIkQIKwJjEEBRCRkLD8ACgQyMLOAy+8gIIiVrGDAkoAAQkQQJAEB4IgCWCckAUcE6EsGHtsz3bnrr1U1Tk81J2MHTF1zp1U36Xv7yNd+cE1tXXVr6v7/Pt/QERERERERERERERERERERERERERERERERERERERERERERERERERERA6C6RTMVAJ8B3AK8B2sLwUeBR485Mf9BcDLgLqj9Tngj4A1XVJylGTAe4AKKDv4q4FfPQLH/Upg1OFxnwHu1OU0mwtUZquieefucn2HXU3zrp12uD5/BI77yEl0CkQUACKiABARBYCIKABERAEgIgoAEZk3qgO4NvcBLyc8Jm+D4cJJs8TRErbee8ajbbw/XkPdvf6QXn9IcIjf+3J7a+Mn6rra5urVqwasAz9LU4QkCoCZuQf4gd2buvXqzbJ8mqa5tV/fjvFoh+NW65IXBcOFhWDwee9P72xvfg/hJ9b/BH5Ol6cCYNYuV7olhH9P0Qvf2P7Y3fy7dzZ+9y8QAL3INR6FKslDRd8BiCgAREQBICIKABFRAIiIAkBEFAAiogAQkfmhQqAZS5KUJG3vjOWc0dQTHa9iIOccVVmGS6AjioVEASBHjieuClI3/6zoI4CIAkBEFAAiogAQEQWAiCgAREQBICJzR3UAM2ZmmFlwmcg6IAcsArce4teuBG5Ag/cKADGSNCPN8valnIutA3Q0zUhfdsgPPKZVmigA5Bperxt1GqQr+g5ARAEgIgoAEVEAiIgCQEQUACKiABCRuaM6ADkw3hM1NyBqB6YAmGdmxmBhsdO+d1mWkwUqEC8bj3ZwznV6PJZY4J72LC4uM4w4bu89W5vr1LWuFQXAnAbA4tJqdyv0nsFwgcFwIerdde3iOaqqu4l1LUlI0ywcAEvLLCwuRQXA2aeeaH5lIAqAedRp19tnTLsd23F3FtsPHa+Pnx5cF8iM6EtAEQWAiCgAREQBICIKABFRAIjIvNIw4LWLbHkVM/fdjDa9J+F9jB2NM39g8/2pDZlO2OfkBcADQFvNmesPhncVRf+lNA06W62cPEWadZizkWP23rnOx89DsxxfuarCjVAB8jy2WtGzubGOay8F9HVdfeDcU0/8k3MuVDOYAf8KvO24X/B6Ani2W4EfAAa0vEWlWT4dLi4lMTdYbzAIVsXt7f73+OD1bYxH20zGOxBxIy4urUbd3NkegszHHUx0CfLK6slQqFhZTr/g3NNnXkT4jc2AX1QAKAA+m9v9I3AR9aKr55pfvHS3h9Hrsmf8dbOPB1mRF3euWdrD57IK0ZeAIgoAEVEAiIgCQEQUACKiABARBYCIzB/VAcxY19124tbX/H9L4vLdE1ld2HEdQEy1oCgADh3naqqqjLohtjbWD+RCz4seC0vLUcuOd7Y7bQoax9MfLNAbDNX1VwFwxHiiq+eccwf2TpckKTFFuW4PJbndncPmqcOY0c+CJO4a0SkQUQCIiAJARBQAIqIAEBEFgIjMKQ0Dzph3Dt/hMKBFttuahS6HCjufjkwUAIeNmXHzLTfT6/U6W9/m5hZnz55tDQHvPUli5Fka20knuFyaptx66+eRJN08NBqwPZowGk1iupZFbVeBogA4VNI05U2/81vce+891B3MbV0UBW9925/ymtf+IHne3kxzcTDg1MnVqIk319cuUFdl6zInT9zAX/3Fn7GystLJuSmKgp/+mTfwS7/8q/R6RTAullZWSQN9C2tXq6hIAXB4GFD0Coo8x+d5J+vL8yJ64diPCjFLmUGv16ff73d2btI0xfuI7sX6ycDM6EtAEQWAiCgAREQBICIKABFRAIiIAkBE5o7qAGbMPuu/Xa0vvFz3JcPGAQ7JG+GJTtVjUAFwmDjveduf/hnvP/0vwTr6mFLXNE358Ec+Sr8/JE3bl59Mp1y4cDFYGee9x/nL7cOubjye8ntvfguDQTeFQFmW8eEPfyRY3be7k0zH4+A5qqtK/QX3SJH5bN8M/DGw0LbQYLjIcGExqvZ8WsY0D7Vgae/lG6HXH7AY0exzMh4xmYyiXuKYJwXvPaPRTqf19kVRxFc2RvVfrLlw7mm8D/5oyQM/B/zEcb/g9QQwY0VUCbCRRZYKZ1nkS2aGWXdf8ZjFHku8JObd/5k70MUy8uzXQKdARAEgIgoAEVEAiIgCQEQUACIypzQMOGNl7SKGsA1ncQ03vdUkVbi92LSqmVZ1p8dSVd3OH5hbQqK3IAXAvEoT4/UvfQGnVxdwgRSwJGZM3JPkffJhuBCoritc3WEAeEc92uis0i5LjHf+5xP8w389RZaEx++bY2nfdlNtqUpABcAhYWZ824s+ny+65SS16+LC9FgxxIYr+38w3uE2zoPv5ikgy1KeWJ/wdx87QxYRfjG9A/d/inMFgASUdfMo3lkAJDXW8aN9dABUdWcBoBv2cNAnMBEFgIgoAEREASAiCgARUQCIiAJARObOYawDyHf/uizpGjMXJWJGVddMx9P937J39IifcFS9+RQA1+o7gdcBVUfruwDcD1w66i9WkaX8+UOP8iNveQ9Zun8Pbx64fnmBd/z0q1gehpqCGr4c4UebursUANdkGXhBh/v2Meboo872ZMITFy7t+3YnZYkjgWDZroElu7GhHn2H3XH4DsCjX4iIHNsAEBEFgIgoAEREASAiCgCRY00NQa7N5VGF4DiXme3+BVY4R4Uzhu1O02Wt52UGU3ntZexRY5T7HAAD4Drah+TKPC/6aZaVZhbct8l41HVXmRHwSGAf8d4VdV3dCSy1LefwPHVpm+V+3toTMEmMG1eGJBE3xEKv4Lknlg6kECjBgWvvRmRmbE0mnL+w1Vo1WGQJm6Mp5ome+DMQkt4790ngfOR1f1G3//6m4EuB3whs0z7v9rvOPv+LX3Szc+50+6vteei972ZzfS203UeArwLWIvYxBXqBAJia2Q8DbyAQoAZcf+r61pl/PXDdYp93/tjLWR32gjtYOcek3P+WYGbGoMiDb9pFlvC2hz/Fj//xv5IHpzAvmZRlRAJ5NtbXqOtgceiHgJd577ciDqkG9r+m+pDZzyeAFLgBWGxbKC96t6VpjllNKABmkF41sBO+Hn1UmbIHxmVN6a11meG0ii6dz5KErHdQX934cEmV99S1Y2daBQPA1fFPb9772I9JY5onOYmgLwFFFAAiogAQEQWAiCgAREQBICIKABGZO/tZB2BEBI6ZkURNFulnUUoaK33GsQSm/bWRmQ1oKYAyM4ospchSjrosS0iTyNfF4noM+mZcv4i4flTavs8BUACvoKmea+MWl1ZuPXXDTU9neXF7652VZnzyvx+JCoDpZByzjz3glYQLfFLgk8D7Itb5IeCNhPsW2nQyfklVJl/aFgDrvuQP3v9fDHv5gVwEliR0VRSaJsYHP32BLE1JAkFQTidMJ6Pgtr33T3vv/wLYDCy8CZRI/Gv/Of771d0b5s7Qdk7fctva133TK+u2Et80TfnIB97PRz/wz10e4w7NO0foWBPgTcD3d7jtDHgH8JLWk2MJw+UTmB3MJ7I0y+O7/cYcdJpSFO1hZmasr51na+NSzCofB74G+IRu2W59rk8AnqZ8NljEnqb5c1xdt/54xwDvOv9V3HAPy1YcALOmhv7gAiDpNAAs0Q/tjgp9CSiiABARBYCIKABERAEgIgoAEZlXqpw6YpyHquOOYCk+WFRpQJ4d2PCexhWPegA455hOp/iWOoA6TanruKvbzLj7nheysLjU2iqqqko+9pGHqapOC8S+Gvh6wnUDSb8/XLXEHC1PW2ZGkmbBsfjawQvuSPiWr8jpshdqki9h1l6GvD12/PZfrzGeRtRpeI+LeB17/SFpmkWszo+3t9a/r66qmErA36BpCyaHKQC8d1RV2RoAiXc4F/n2ZsYddz2fk6ee0xoAk/GIjz/yoa4D4EuBn9y9qVvviLzojdO0/a3TzEiTNPjbhsrB856b8+pv6tNdX1Aj6a1ASxNmMzh3qebNf3spKgCa/n3hHSyKHv3BMGZ9N+5sb/wQTbl2m4/RVHMqAA5bAMxCXTvqur1ddOwTxV43zZUe9KGO/8MuJyd2zjMpfacfA5LE0/TnvlpEwLT0nU+x7Ilr9Om9X4j8FFCimaD39trrFIgoAEREASAiCgARUQCIiAJARBQAIjJvDl0dQGLWdA9N22s+zBKcq6nrqnUs2bmafr9PqEmNc85NJpOaptik7bxMLVQ29wzeEzXWXeThHqeJNX/jabgOIEubvxiT0uFp79Q0LR1FZvTy8Hh87aCqYyoGia0DaAou4roW9bz3MbP+OtQ/cD9LgWum4zHet9ew3nLb8zh9yx1RF8V/fPCf2drcaL0wVldXefe7H+TE6mpoff/9wAMPfPqhhx56L02hz1UX7fWHw15/MAKWQvu5vbURLIs9sZjwu68xlhcseFP/40e3+LJXj2jLx2kFr31Fn1d9Y59poFi5quG7fv5xPnHGkSRXvU85sZjxWz/6fBYG7amSZ8a7Ht7hjX+yRpZe/XjMjK2NS2xvrkfc2MbS8mroTcE75xYuXTz39ohaoAx4O01jVwXAvvBxUzznRY9BHu6O671jNNpha3O9dblekXH7bbdx6tSp0CrvfP3rX/+G+++/vx9a0Mx8lmWR714x5c2em085Tiy2fyIrMngoq3ns7DS4vrXNDHDBfXQOHj875tNPte/j9omCm6/PWF3MAvtoXL/SlDW33dhm9pknuIjzjaUJaZa1L1bXdwJ3RV6R70MO30eAPZSHdr3pNImZkGD3Yut64843f8FlDvC1id3HA6vFtejvtDwqGQb0JaCIAkBEFAAiogAQEQWAiMy9LkYBYr8Rv/zNq0Ln/zuJFi4EMos/2ZfXF7PO2JV2vY9y9APA00zcGBqYtul0sjna2boRuLttwTTNQuO9zYa9J88Lev1B63hzXvQ4c+ZJxuP2LlFFUbC2tgYQmJ68GT2qa0fUSFLEIs7D2UswCdSl5RmMS+PkUtJa5VdWTTXe4+dryohCoOVhwqkVf9VqSQ+cXDLOXaoYT0P7aKxvu85DwNcOZ+21Cs450jTF++B7jPP4nqvr64CupmT2wAUOaH7Ja2Ud/PthxHrKJE3vM7M3G7bSxV6ZGS/68q9laWW1vSloOeWjH3gfVRmuDk3SjCzvB7e7vbXBzvZm3Nz2EfUKSZJw043XkSRJ8Gb96nsdr3t5Te3ag+JN7xzz+383IQ9kaZbCr7xmkdtvTFvH+Nd3jJ/8wwW2JxGlwN4o6zR4HvcwO3DUxKlJmnL9Dad3pztv3fZoe2vjsfW189El3RG2gG8F/ucoBUAXTwDbMQu6up4SbuoYnzxmJGlKluWB3wI4tjY3mU4nwXX2+gOWiyFtb9vPvOm7LEbamYQfr8sa6tpYHFjrbwGKrPkNwqR0TMr2leYp9ApjYWBX7TRswLQ2tseOrXE4ACxJSLu8tSBYQt4sZJAkMQEwsCS5u+N76X85gh9v9Xlc5BhTAIgoAEREASAiCgARUQCIiAJARObVfjYESbhSB9DJALrBWpKkq76l9CuJmHTzyvosWNxjZrG96WbCkqbQp20X8tx223v5mIMmS5p6AGdXXYT8SLxVWNTrY7t9J2V/A+Ax4NfosKnNE49/6vnrly7eR8uTTF3X9Ht98ojyYrOE0c5WcLmqqoJNSy9zzjVVOR1IDJ44D3/5UNI6PXiWwqfO5qT5MNgYNE3gnx7N+fhTSetu7kyM2ickSUQh0AwCsuj1o27sna24Cs2ynJJGtZ7z0a+fd+5l3vvztNeyjoF3cUgakh7lIEyBdwAvbb1pkpSbTj+XULcvM2N7e4sL58+GN5znUb9XACgnk9Yp0Zt9TFg5cV1Uuav3tJYBX1mnkcS+ukkWvBTMjKLI6ere3lMpsBkrq9eRpu3n3DnH+tq5qArNNM/Je72Ymzq24nOrHI/Nt/8QwYBHgRfTlA4fuCM9PThRTxM+qhlpc3Md/jZxZrHtvuOPJU3iPiXZgb5dxLTxO9DXb7G7a3b/6EtAkWNMASCiABARBYCIKABERAEgInPuqA8DRthDddgBjXN5D9PSY9bdMFaWGmkadzyhmYYvc3s6PT5wvuPqGZpXkOjXUBQAn3VzOdYvXQpeHN57FpaWufdLvqy1HsDMOPf0Gc6dPRN3wUXUFgz7xo98+wLDfsQDmWVY2g/e/A8+dJH3fLB9hl5oagDu//ohp1baKwGTxFhZ7sUds+VR+/hX/7jNex6OOYWe0c52VKFUTHUfNG3LQgVasKdCoKYVWXjZRe/cDxOuBEyBfwfeqQD4nALAs7W1EbXs6nXXc/cXvbAp373ajZCmVB+qePrJ/+1sHweF8d339Tm5FKrw8Vg6IMnb+6r2ioSz5zd48F+2qQIVfnkG970w466b09by4jRJOP2cNKIU2GNpDytWaHsK6BUJjz1xLioAACbjUfgGNKM3HEZVLHnv4wIgsojsmfsQcKuHn4pZFfALCoB9DgtX160BcHm5jrdMWXqmZbjSzZzHIirirjzWW2hRqrppJd522C6BaQVJzEOKv/xxpuVJCk/tjuUEvf3I5Tz70GJcXwKKHGMKABEFgIgoAEREASAiCgARUQCIyLw66nUAE+AM3XRZsXI6vVDX9dB7d2f7os34dRIxKO5iik1oxtinEaO+CZBn7ePnV+oUYspnd+sA6kAdgI+vA0iBLIuopTiWZQAKgK444HVAj24uperSxXMv/vu/eesvtvUP9M5x0y238VUveUWwksx7z4f/7b1sByoR17c9D7xxgywNTw/+lfds8OpvfLq1jr7IoK49iydupAi8wmbwhrcnweWa8AlXVFY1vPjeDb73vsA+5sbW5nr0i1P0+8FZfyEucC+/Nl2XAru65qg5ygHgaaZk7sx0OlmbTidRlVrLyydwrg5ePDHdg2sHn3yyDv4YqKzhjud4qrJu/wGPA+9z8iwnpnfpk2tRdwxVGX5EKSt43k3hfTRn1Hu4YSxi2m8AfwRvQgXAUUseH1cjHttS2mgerUNl5IknvtPvHkSt0+Ie//cwDYMcAvoSUEQBICIKABFRAIiIAkBE5pxGAa7NlUqbA2CBDRsHP+njUdjHGVwTXR/SzE+RAuDZJsAnaC8sssl4dHE83rnLe3+69YrwrtPuQUZTjXdxE6qWGpY8hVEJRDcZjRwHjLwepxVc3LLWOoA8s2Yf58cF4Em6m/svAzZmvdMasf2s6xIYBgJgmqbZa83sZ8ysCK2wqspgCJglLK+ciGq4mWfGoBf+5BZbWgyQZnmnHXWzFPp56JiNCxcucWl9M+6F6fej9jG2Gm8GlYCPAS8HPk03H60NmAIjZkhPAM9WAsH61LquKg7o+5Oqhq3x4T6JVQ1bdbiF97Seq/cfA7Y5JNN+x9KXgCLHmAJARAEgIgoAEVEAiIgCQEQUACIyr1QHcG1SroRnqEqkoikw2l97KOyJnRq9+zkRRQFwND0C/DrhyRsN+AbgC+mo6tI3d2Jwuboqo6viqmQaDAwzI8+L6P0MBopZ1HFc5uq605CKnfV33iNPAXBt3rX7F3N+3wHc09mWoy5cYzoeMx7vdLZZSxKWl+PKlc0s2L/PzKIbeALUZdwPB2J6MH4mAJzjuNN3ACIKABFRAIiIAkBEFAAiogAQEQWAiMwd1QEcBpfb7XXWlsumNN2Nep3to8eDTTBbDG8+ZlZi28vhTmjerCy4l01x1qCjo66AmqbyMyTlCLbYUwAcBt4z3tnpsi9fWdfVW4GHIy/emJ0cjMfb32PY3eEAIOpYynIau/ELwG8CFwM32YJ37vuA27s6j8CfAP8WcR7r3f0T+YwMeJDmnWk//0rgNR0fyyng0QM4lsuzQH9+xD7eAHy8w+1OgVfN8wWq7wBEjjEFgIgCQEQUACKiABARBYCIKABERAEgInNHlYCzVwJP09200TFSZtPObkwzBfZ+20tvs1GH+5gw520BNT347M/vbXRZkx+/3bM0JbRdyWhKbFP2nwc+RVOZF9rHO+juydZowlslviIiIiIiIiIiIiIiIiIiIiIicnj9H4sN/dXJWD5iAAAAEnRFWHRFWElGOk9yaWVudGF0aW9uADGEWOzvAAAAAElFTkSuQmCC";
var canvas2 = document.getElementById('canvas2');
var ctx2 = canvas2.getContext('2d');
var tempCanvas = document.createElement('canvas');
var tempContext = tempCanvas.getContext('2d');
canvas2.width = 250;
canvas2.height = 250;
tempCanvas.width = 250;
tempCanvas.height = 250;
// store the ImageData in a way it's accessible at every frame
var imageData;
bat.onload = (evt) => { // always wait for the assets to load
ctx2.drawImage(bat, 0, 0);
imageData = ctx2.getImageData(0, 0, 250, 250);
animate2();
}
var alpha = 0;
function animate2() {
ctx2.clearRect(0, 0, canvas2.width, canvas2.height);
ctx2.fillStyle = 'blue';
ctx2.fillRect(0, 0, 250, 250);
var data = imageData.data;
for (let i = 0; i < data.length; i += 4) {
if (data[i] != 0 || data[i + 1] != 0 || data[i + 2] != 0) {
data[i + 3] = Math.floor(Math.random() * 255);
}
}
tempContext.putImageData(imageData, 0, 0);
// drawImage the tempCanvas directly
ctx2.drawImage(tempCanvas, 0, 0);
requestAnimationFrame(animate2);
}
#main {
display: flex;
flex-direction: row;
}
#canvas2 {
border: 1px solid black;
width: 150px;
height: 150px;
}
<div id="main">
<canvas id="canvas2"></canvas>
</div>
But you don't even need a second canvas here, you can draw "behind" the current drawing on a canvas thanks to the "destination-over" compositing mode. You can even use more compositing operations to clip that background so that only the image is "colored":
var bat = new Image();
bat.src = "data:image/png;base64,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";
var canvas2 = document.getElementById('canvas2');
var ctx2 = canvas2.getContext('2d');
canvas2.width = 250;
canvas2.height = 250;
// store the ImageData in a way it's accessible at every frame
var imageData;
bat.onload = (evt) => { // always wait for the assets to load
ctx2.drawImage(bat, 0, 0);
imageData = ctx2.getImageData(0, 0, 250, 250);
animate2();
}
function animate2() {
var data = imageData.data;
for (let i = 0; i < data.length; i += 4) {
if (data[i] != 0 || data[i + 1] != 0 || data[i + 2] != 0) {
data[i + 3] = Math.floor(Math.random() * 255);
}
}
ctx2.putImageData(imageData, 0, 0);
ctx2.globalCompositeOperation = "destination-over"; // draw behind
ctx2.fillStyle = 'blue';
ctx2.fillRect(0, 0, 250, 250);
ctx2.globalCompositeOperation = "destination-in"; // keep only where new pixels are opaque
ctx2.drawImage(bat, 0, 0);
ctx2.globalCompositeOperation = "source-over"; // default
requestAnimationFrame(animate2);
}
#main {
display: flex;
flex-direction: row;
}
#canvas2 {
border: 1px solid black;
width: 150px;
height: 150px;
background: yellow
}
<div id="main">
<canvas id="canvas2"></canvas>
</div>