Home > Blockchain >  Drawing image with transparent point over another image - loosing transparency in Chrome >= 104
Drawing image with transparent point over another image - loosing transparency in Chrome >= 104

Time:09-08

My application stop working in Chrome 104, 105. Can anyone confirm this issue?

steps:

  • transparentDataArray: Uint8ClampedArray = new Uint8ClampedArray(w, h);
  • insert some values, leave 0,0,0,0 for transparent points
  • putImageData on context
  • drawImage over another context holding an image => expected (and working until 104) - replaces only non-transparent points => chrome 104 - replace transparent points with white color

const canvasMain = document.getElementById('main');
const contextMain = canvasMain.getContext('2d');

const canvas2 = document.createElement('canvas')
const context2 = canvas2.getContext('2d');

const drawData = () => {
  console.log("draw data")
  contextMain.putImageData(canvasDataInitial,  0, 0);

  const dataArray = new Uint8ClampedArray(w * h * 4);
  for (let i = 0; i < w * h; i = i   4) {
    dataArray[i] = 0;
    dataArray[i   1] = 150;
    dataArray[i   2] = 35;
    dataArray[i   3] = i > w * h / 3 ? 0 : 255;
  }
  canvas2.width = w;
  canvas2.height = h;
  context2.putImageData(new ImageData(dataArray, w, h), 0, 0);

  contextMain.drawImage(canvas2, 0, 0);
}

let canvasDataInitial;
let w,h;
const image = new Image();

image.onload = () => {
  w = image.width;
  h = image.height;

  contextMain.drawImage(image, 0, 0, w, h);
  
  canvasDataInitial = contextMain.getImageData(0, 0, canvasMain.width, canvasMain.height);

  drawData();
  drawData();
  setTimeout(drawData, 1000);
}

image.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAAXNSR0IArs4c6QAAGfNJREFUeF7tXWusJMdVPjU978d9791d7y6Y9QNvEmPJciKBCYktB0NMbMc4IYQkIjIgRVggfsI/fuQXIsICAUZEAkIsIjmYGAwoCUoU4rzARhg/8Ht3s9n33sfceXfPNPqq5vTUzN47cxtSIqo5I43m3u7qM32 Ol fOnVO1ahPPfJnsVKK8MKn/TbH smxTCZD/OZ2mUxeX7vXKwzbU88HQWHqeT4ZxzFNvnGu0 lMvX4wGIyd/63f FWjrLwEgX0goH7/Dx6NdyMHkyYI9OmEGP8fBAEx8NqNIN1uNxVBfvPhh4Qg zAMaWIQUL/3qT/Z04OAJLncyKvYHgR/Gy Sm4plFE1/ws/yQLM8SBiGqQjy8Cd WQgi1r9vBKYSBFKKxeyuQywQxHiW6UMs1wTp9/tTlZ08/4lf 6gQZN/mIQ31EGtaDPKDThAefu3VlZMxyK98/ENCELH7fSOgHvmjT08lSD7PQyl1VRzyg BBmNx7aTzpQT7 sQ8IQfZtHtJQ/fGjf7VrkM6BeyYz0EOs3eMPHP /zWLNuh7fvVeQjuNBEKQaYn3slx4Qgojd7xsB9eiff3YqQYiiPWMQQxy3BNkrSOdZrVkEmRxifeQX7xeC7Ns8pKH6i888PnWaN5sdBelX50gwyzV7Fmu3HAYfq1QquhfwP4wZb7s9e7LdPnFsMDCTBXu9oigaO/ULD94jBBG73zcC6i// vP7Iggb6CRJZhFkMOglBGAi2HfH1zMpbILspsXVMUd2qrKT08AfeOBnhSD7Ng9pqD7z2BNTg3R4kN3IMUokTo8BkImffPrbRs7EYPJMeo9ZXTR7iDeeJ3n/ve8RgswCVc4nCKjHPvfkjEy6IcDuZSgmiTjtNeTX2PWcQ8G1k6Uie03b7kYkfG8 X07lQe69504hiBBg3wiozz3 1FSC2Ma8WwwyKw/BmfhJL8J32G63ryLZbqTbawhWKtVSEeR9771DCLJv85CG6vEn/nkqQaYXMiqalclGHmWvIB3wc4ywl4eyh14cxNtxSq22nIog4kHE6NMgoP72C1 cGoOwsEkDZuJMzhJNfjk8CBs2yMRvNvLd5HKdF8tiguHaSZIsLq5O1Xfy/u5/313iQdJYyJy3VU88 aWpxYo8hNqLILOKBRGDwKhh3DBWtMcnG3s n78qPuHEpE0Qm2T2dPDy8oFUHuSB 35aCDLnRp9GffWP//TlGMk2GCWMl8vHS6USFUsliod5CTZoEMYmy059Uw hJj0DE6vZiwiyCoWCbtNsNqnVaum/IadWG8UQuA/MmqEtiIO/o0yWur0etRpNqu/UaWtzi7br21pOr9ejwzcep5WVFS0LxMG08cWLF nMmTP6/1efe4FOnDhBt912Gx07dozef c7hSBpLGTO26onn/piDEPEsIYJAuPWBCkWE0Nmg ehET/FO60GhVFEvW6Xer0wiUnYC3TigTZ4GC5IAXLAsHEe37u8PIohcA84BnIwQbaaHU3aRqNB29vbtLm5qT/xP T8yNtu0veKY1tbW5oUly5dovPnz sylNZWnW644Qa6 eab6ciRI/Twhz8oBJlzo0 jvnr8C09pgsCYMPSBMYIMMGoQBC82XH5KwzDRDu3xJGcDhvGDZGYdSU4bO2UD/XeQDSjshdqoYcRafqlI1Uo1CeJxHe4D7UEQXHNhYzuRDwJsbGxoIuzs7GhZB689pr/v7NmzdOHCBU1CkKVer1O5XKa8Cujo0aN03XXX0draGv3pJ39XCJLGQua8rfr0Z/8m5qc1jAvGzkMVGDGMjJ/qIAraYGoWZEDbK1vb1Gy1qD40Shgt2rHXKJQL noc4xgEJECJCd742w68mSQ4jvfFjW1NBHgMEGPSgwyyGd0OXgPnoAva93s9qiws6O ElwI5oMt3nvw7IcicG30a9dUnH/nDuDgc88NQtWfo9yk3HOocWF n7PCpznEKCNEaeo7T569osvBTG8YJg Vh0uLCiCAcp4AwiD1AEBgtEwfeB23sOOf0uYvaK E7QBJ4Bnyyt9ppNbUM9mTVajXxhPi72W5pT4g37v/yc/8pBEljIXPeVv36b/9ODOPBEx GyUMnDpgxbuegHAQCAeBB8MbfJy9s6Gw4DBRvGDMPyXSMsVBIvAkH8zgPo0bscPjwYX0Ny4QsmyivnzqjSYPvwjl ay8xnPYFEfg6kE7fT6OhJxmiDGnC4o3vb7/8shBkzo0 jfrq5x96SBMExsoEsY38wIEDegjET3kQCG820LPbneSJzcdwAxykry7ktGy8eZiF7 HZKsjnGAZxBbwDk08H3Jv1sUrfydmyQGW0J2IPAuLp 2u1KF8uU1ApjhH2yjPPCkHSWMict1V3PvhgDKPiIQgbP88yLQzH8TgOw7XJAUPfCk0MwU9zHiJxBnytNh5vgGh4gywckOOJD3IgxsBQDcaOY4N nzKlatJFdlY/ORj19b03dnawBxBlazUT00QRVRcWiIpmsoDjqTe/8lUhyJwbfRr11Vt/5t6YjRUGCKO3E3rsTWDMaMfn7WQfJwFxDOdZHj4rVqmJnezj7HgYtcfWgeAazGLxLBhP3dqycQ4GD8Ovb7cSfXkq2v5cPbKW3A/an/7aN4UgaSxkztuq4 96jyYIl3fwcIoJwAbPbWyC8Go9JogdYDOhisFowzc7h8IECbImycgZdrTh4RlPF9uZc5525vvptEcLoiYLJ/H/8uF1LY/jkO89/Q0hyJwbfRr11cHbfiIpNcGFNkF4utcu/YDR2UMqGKr9PxspEy4bm/UY9lOdyaFPqGisVovjF/5OXnHIMibvT9H0FY1L6 vma4a7Rl74t28LQdJYyJy3VYtvuzW2S8ntgkIcR3xiv5ggfA0Pu zjdns13DjOLmG3/ 51G8hEJoE0D604eYn7YW8BufBsiE/0bFsYUjZbGiMAk4E/V9cMQZigZ58Rgsy5zadSXxPELiZkghC2 0TJSaWSzCIxKeyhjG3sbIhMFi1juDevGu7EyJ6F15nAg9jTwkwMboeJAXsIyNl EATDsmxgsv3sIfg6vq/D1xwYK7c/ c3viAdJZSLz3VgdevvtMccAmKaFAXJsAWgQDDOBJpN4nFm3ixc514EZqIQgGN4MZ604NmGjry2UxhZM2QE/xx52TGIP8fB3r2tiFm5jkwnHjl87qvVC  e LB5kvk0 nfbq jvujkEKu76KCcKGNy0Ix5OcjZKHW0w4ws7q/dF5eAf2EFxBXCyNNl2AAXPBJJOVZ9b4XjiByXI2N3YSgkySD9e89cRC4mHwx9NPfEs8SDobmevW6ub33h zUfKwhWeSuDiRcxe7TeOi5INniOxpYMiMET/EJrNuG7Y9jGo0t8amhe1pZs6ga08EsqHaNzdKPCJeOXf2UuI9mCD8ifu/9ZbqWHn lx6Tad65tviUyquf uiHYi4T4YCY123geLtlDNwOlO1Zq2JmfN8sOw6BsefUIEnUwaBxDKRCYrDdatHBIyiph foU9TDmo4MKcqTIqxRCahRH1AQKAqyuAeimFAtTJRFkWJWUZw1pSRcEInv55ku6FHuNJKEJNq89sJr4kFSGsk8N1dvf/A 7UG4TISf4Pgfxxs7nbG8BMcYnCdR4fi2PgwmB/LVonnigxyQiWJDzELBWJEBP3SkTGEPVcQhtVs96vUGFIWYSiaKB4pUXCGl94bDD EMSGUGlAlAOuOVOv2Rh JdFu1ylGMLpTGCPPv1fxeCzLPFp9Rd3XT3nTpRiOGInbBjj7G91UyGKDY5OLEX9EeJwLHp3WHgPOi1CcWEqO6F56hvbemh0sGDB nQoUNUrGCxVUStVpsaOy1qNrvU7YQUhpgsIMpnFymKetQfhBTHEWVzWFSl9Cfuuds3Kxw5pmEPxhMKP3rYZNJ5 vhb//K0ECSlkcxzc3XNj9 WVPNiaIKnO4wLs1d48m9tNhJ8bO/CHqcU5MbWc6CxPSTbPHeGgmE5PcciqO8CQVZXV2mncTmpEG42uUp4tGadBiXq9VDh2yGVialQRJlJQJlgOJSKTRk7T/UyQfjzyEplLJP X//6jBBkni0 pe5q6Za3xLy8FtfC8EEErvDFEMseNvGMFxMki4mq4YYMPPvFeQ081cN2I1llCGKgendxcVEPsfTqv/pG4rnC0CzWiuPR7yJSbBZARf2eJkZtoULFYk57FBBnq27K2G1i2IRZq44y7Tj 4tP/IQRJaSTz3FxV3nJDzMWBnLyzhyRhb7RJAw xMLziNRtRy5S761mr4UbRKptNhjTXrK/qgBwzZFgkBYJguIWqXSyfRSAOQsQx4gv8nEFMuTwWXGGZrqIMFcwak4BocalKq6vLVCzlqN1uUqNRpzfebCWbRjBR7CHXoQPVsTzOi1 VGGSeDT6t7qp84nqdScfLrpLl2aCMyo/NYE0G6QU1WsvOe1BxeTk l6qlpDQEHoUXZoE0CNhzKBVRSPbFlM2Z30QEATCUQiCOGAj3Vyzl6dChNTp8zTrl81narm/SxsZlOnXK7JWVVADQaIEUiH7oYI2iMKJeiAmAHp369oviQdJayRy31x6EVxHiyc4BNZd0FPKVsTwFE4cz7scOmhWBnEOxiQbCXTp3Jhn sKeBMfMr7MFeh94ji217FBVKWNNuCPLay6/r8 VahY790FE6evQQ5QtZunLlEl26dJG2txemDvEWF7JJ/ZZed/LqeSHIHBt8WtUVra7FpXKZ4Cn6EVGlskjLS2s6L3Hl8ibllzaoUs3TwlKOqrWCni3qdWNq7gyo08ZmcGaTBk7OMYF4AVVjo6s9E2IaEBAvjmNArNV1k0eJogG1mj1qNlvUjxQVi7yIq0 VWp4Wl/JUrph4otUMqb4VUrPRo0a3e1Udlh0zcazDs27bL50UgqS1kjlur6rX/nCczxfNOD6KqVpdoNXVNf1/fbtBa0cLlMsTFYpE2ZwJyLEGo9mIqNsZUKvV0AE3v5kAnH2Pe2YzN945BefZ42gvRM3hRnFFGvQz1O32KAoxTDLX4FdyS5Us1RbyVCoPE43NHu1s9zRRUEw/WYfF09b4LsQ9dn3XyW9IkD7H9p5adbV0/XG9L5ZenJQPaGVliQ4cWNV5BgxJCpUyxRRRf4B16GbJbbvd0yQJe2bszwTgH8PhxCM a UCBZlRphvxQhiF1O1g95SI2u0dXVJfqdQIafFOp6tlI7uuDT IqFBEUjFLueHqRCQUTb4kosriSlKty7GUXW28vr4 lt954 syzZvaSub4AlU7fizO5QIql4u0srpI6wdXaGm5pss6MI169nyTwgg7mZgtQ3n3EJPpxpCsMpUgBw YWiieIdPJSGwgF5rK4ULeDL2y2Tx1O33a2Wno7D0TpFTGjiSowTKJQd5ZBcnEKOrT2qEjya4nnP3nJCGIgv2wbA y8fzrMsSaY4NPq7q65pabYtQ61RbKtL6 Rksr M3AAbXaKAlp0ZmzLeqhDKTd1eSAUcNQTS1UhirlarKeg0nAtVD4XF8zv0GIlz0DxqUqS4vLwyx TM1GVxMEU8sgDGa8on4TgyhddmIv7BrEWP8 oKBQGVtDby/Zxf0gx2MTpPPGOSFIWiuZ4/bqHT/37hhP3mw2oMXFmn5SmxzFZbOzSKaga6Ow7iKKTEIul8tQoRjoIU8/Mj 8yW ctzPp5cJ4OfugP6BBPGpfKuV0e3gkfAdikCBT0EMueKfzF07RoI8gnvQkghl2gUBEQZbo4kY9mebFd2OygPf5wpCP16xwkL7z8mkhyBwbfFrV1V0fvife2NjSsUWxWCKKQRCzPxVRhoJSn/oRiJDVQbSJVRTlC8hbxDoO4c3k8IkXhkx4cuMzbJlj7EEmbzCbD4e7MJogHcMmrDMvFMxeWhcunqQoVNTrKj27pXMpxYCKJUX5oqIrW 1kVoy9G dz9J7AQTDmQbZefFMIktZK5ri9evcH747PnT9H9e0mIeeBJazdbqSJUi5XabN9kgb9gAZRQX aJ3ifYNj4LOTLer8sXb7ebmsoYdiYPdK1XBcxRBq9JpfGFitdHaTjuzhIRywCj6JLVfp1CrtE3Q5IanZ/L5WzVK2BKBkKCjXt6UBoztjb69gh2x5itV77nhBkjg0 rerqxp 8Rf8 CD9tIYCrevF5cfOKNkquhjXDITNEwvnlqknU8TGuw L22 cvTb2ng0fXkzXvLIc/9VTzzmZSro6YhN98vy  dDkhACcgeX2I9h6DxtjOjFuvnhGCpLWSOW6vjt56XZwJRvti8VBIG3x/QBnVTwzU3jwuMWI1 gUpGDQnDdmAUcw47VVdNj9/YMcx/LcJysfXm9vLauGNXnj dFJmYhdL8ipHeEVb/sYrsmBqju09terq ttP6G1/eGoUEuxiv8XCaDUhr7lgg8NnU6/TGK0J4SldNuRaafrPNGcKZnZrkiR8rFgwmy4wYTnA5/Nnvntu7Fq0tTduyAVLY/LPPfeSeJDUZjK/F6jbH3hn3B YnQ3tIYr2AJmAiuFowRSXkdsBd7c4Xm7OMUZScj4D2zhvfu7AfpuSdzNjpgbGwG0PY c5sjS6frdYp9MelcJDzstfe14IMr/2nlpzdddH7kq2/bGrcZMhUmtnzHj5G5gA7bwZArHnsQ0dx0LMzU55ZQrjBmyTD7K2N83F9nfYRF0ervcwxNRrc3V hAnWC80kAd/Xs/8gP3 Q2krm AL1jvvMzop7DbHKlN91Xyyud9rutcd2DeGnPccomcL0rUEzpekP9MsXRx5st11LCn2TuNxryW2xPKocRj8/8/eviAeZY4NPq7q66Y7jem9eM24PhuN9MysFYy/nV8amSXHMLg5sdztJYM6lIDwLBhnZstn5cK/XIGc8iO0l7L xmQP/bw/f O/ Viv5/t02bajWRluTQs5LX5EYJK2RzHN7deO7rk2mefWPbg7L0TkmUcGqtSTWBOT8xAapioHJVvPTnctMOHMd5cywZ69XGHfHCGIPpXCiXDG/fGUH8mP/b4emGDKX1Z94IabCIil8ZjPmZ6ZZ7ulnnhMPMs8Wn1J3deCWG0eP8F0uZtLsJZez53ud5zUge51vRaNM 25tZk0TowLAHnppggzzMvicvH/JpKe0kDlvPpMgdkC8G1Yc2O F4yyCdQbTg/hZBOEfDWUvJgSZc4v Pquv1n7shqkexF4e 33 bjOcmz4Co1kEwVBumgfhCmO 9/p/n5IhlouO9FSmWr35 qkEmTWEmuUhZnkYyo qff83Q6xZBJmU2Xjlu0IQT43ZhVpiLC5QFZneICAE8aYrRREXCAhBXKAqMr1BQAjiTVeKIi4QEIK4QFVkeoOAEMSbrhRFXCAgBHGBqsj0BgEhiDddKYq4QEAI4gJVkekNAkIQb7pSFHGBgBDEBaoi0xsEhCDedKUo4gIBIYgLVEWmNwgIQbzpSlHEBQJCEBeoikxvEBCCeNOVoogLBIQgLlAVmd4gIATxpitFERcICEFcoCoyvUFACOJNV4oiLhAQgrhAVWR6g4AQxJuuFEVcICAEcYGqyPQGASGIN10pirhAQAjiAlWR6Q0CQhBvulIUcYGAEMQFqiLTGwSEIN50pSjiAgEhiAtURaY3CAhBvOlKUcQFAkIQF6iKTG8QEIJ405WiiAsEhCAuUBWZ3iAgBPGmK0URFwgIQVygKjK9QUAI4k1XiiIuEBCCuEBVZHqDgBDEm64URVwgIARxgarI9AYBIYg3XSmKuEBACOICVZHpDQJCEG 6UhRxgYAQxAWqItMbBIQg3nSlKOICASGIC1RFpjcICEG86UpRxAUCQhAXqIpMbxAQgnjTlaKICwSEIC5QFZneICAE8aYrRREXCAhBXKAqMr1BQAjiTVeKIi4QEIK4QFVkeoOAEMSbrhRFXCAgBHGBqsj0BgEhiDddKYq4QEAI4gJVkekNAkIQb7pSFHGBgBDEBaoi0xsEhCDedKUo4gIBIYgLVEWmNwgIQbzpSlHEBQJCEBeoikxvEBCCeNOVoogLBIQgLlAVmd4gIATxpitFERcICEFcoCoyvUFACOJNV4oiLhAQgrhAVWR6g4AQxJuuFEVcICAEcYGqyPQGASGIN10pirhAQAjiAlWR6Q0CQhBvulIUcYGAEMQFqiLTGwSEIN50pSjiAgEhiAtURaY3CAhBvOlKUcQFAkIQF6iKTG8QEIJ405WiiAsEhCAuUBWZ3iAgBPGmK0URFwgIQVygKjK9QUAI4k1XiiIuEBCCuEBVZHqDgBDEm64URVwgIARxgarI9AYBIYg3XSmKuEBACOICVZHpDQJCEG 6UhRxgYAQxAWqItMbBIQg3nSlKOICASGIC1RFpjcICEG86UpRxAUCQhAXqIpMbxAQgnjTlaKICwSEIC5QFZneICAE8aYrRREXCAhBXKAqMr1BQAjiTVeKIi4QEIK4QFVkeoOAEMSbrhRFXCAgBHGBqsj0BgEhiDddKYq4QEAI4gJVkekNAkIQb7pSFHGBgBDEBaoi0xsEhCDedKUo4gIBIYgLVEWmNwgIQbzpSlHEBQJCEBeoikxvEBCCeNOVoogLBIQgLlAVmd4gIATxpitFERcICEFcoCoyvUFACOJNV4oiLhAQgrhAVWR6g4AQxJuuFEVcICAEcYGqyPQGASGIN10pirhAQAjiAlWR6Q0CQhBvulIUcYGAEMQFqiLTGwSEIN50pSjiAgEhiAtURaY3CAhBvOlKUcQFAkIQF6iKTG8QEIJ405WiiAsEhCAuUBWZ3iAgBPGmK0URFwgIQVygKjK9QUAI4k1XiiIuEBCCuEBVZHqDgBDEm64URVwgIARxgarI9AYBIYg3XSmKuEBACOICVZHpDQJCEG 6UhRxgYAQxAWqItMbBIQg3nSlKOICgf8BRVv5qm5tcfsAAAAASUVORK5CYII=';
<!doctype html>
<html>
<body>
  <canvas id="main" width="200" height="200" ></canvas>
</body>

</html>

CodePudding user response:

The answer is "Yes, it's confirmed". The code snippet above proves Chrome behaves differently and oddly. Reported to chromium buglist.

  • Related