.js

    var canvas = document.getElementById("canvas")
    var dataURL = canvas.toDataURL()
    
//     i then display this dataURL doing this
    <img src="dataURL">
    
//     this works fine
    
//     then i grab that same data and do
    
    const buffer = Buffer.from(dataURL);
    const ipfs = Ipfs({host: 'localhost', port: '5001', protocol: 'http'});
    ipfs.add(buffer)
    .then((response) => {
     console.log(`saved to IPFS:${response}`)
     const hash = response[0].hash
     this.props.contract.pushMemory(1, hash, "this is a comment on the pic", {gas: 540000, from: this.props.userAccount}).then((res) => {
       console.log(`saved to ETH${res}`)
     })
    }).catch((err) => {
     console.error(err)
     // reject(err);
    })

then i have the link to the ipfs hash

<img src="http://localhost/ipfs/ipfshash">
  this last img display shows it all as base64 png string of text if i load it directly in a browser tab, or as a broken image if i do it as an img tag