Why does converting a blob to a data URI result in a different URI than the direct data URI method?

I'm doing an experiment and I discovered converting a Canvas to a blob then to a data URI results in a different URI than getting the data URI direct from the canvas. The contents when opened are pretty much the same on both URIs.

How can I get the same URI result as the direct data URI method when using the blob method?

let canvas = document.createElement('canvas');  let ctx = canvas.getContext('2d');  let text = "Bufferoverrun";    ctx.textBaseline = "top";  ctx.font = "16px 'Arial'";  ctx.textBaseline = "alphabetic";  ctx.rotate(.05);  ctx.fillStyle = "#f60";  ctx.fillRect(125, 1, 62, 20);  ctx.fillStyle = "#069";  ctx.fillText(text, 2, 15);  ctx.fillStyle = "rgba(102, 200, 0, 0.7)";  ctx.fillText(text, 4, 17);  ctx.shadowBlur = 10;  ctx.shadowColor = "blue";  ctx.fillRect(-20, 10, 234, 5);    const blobToBase64 = blob => {      const reader = new FileReader();      reader.readAsDataURL(blob);      return new Promise(resolve => {          reader.onloadend = () => {              resolve(reader.result);          };      });  };    canvas.toBlob(async function (result) {      let blobToURL = await blobToBase64(result)      if (blobToURL != canvas.toDataURL()) {          console.log("Data mismatch");      } else {          console.log("Match")      }  })

I've looked at Chrome's Blink internals and cannot find anything that explains the change.

Canvas Element Source Code - Blink

https://stackoverflow.com/questions/66071736/why-does-converting-a-blob-to-a-data-uri-result-in-a-different-uri-than-the-dire February 06, 2021 at 06:59AM