Quiero descargar lienzo con borde. En la pantalla, Canvas tiene un borde, pero cuando lo descargo, no aparece su borde.
let canvas=qrRef.current.querySelector("canvas") canvas.style.border="black 30px solid" if(type=="PNG"){ let image=canvas.toDataURL("image/png") let anchor=document.createElement("a"); anchor.href=image; anchor.download=`qr-pollective.png` document.body.appendChild(anchor); anchor.click() document.body.removeChild(anchor) }consola.log(lienzo)
<canvas height="400" width="400" style="border: 30px solid black; border-radius: 5px; border-collapse: collapse;">Lo que puede hacer es crear un lienzo más grande que tenga espacio para el borde negro.
Luego copie el lienzo que ha creado en este más grande, compensado por 30px para dejar espacio para el borde.
Luego dibuja los 4 rectángulos negros que forman el borde. Este lienzo más grande es el que desea descargar.
const canvas = document.querySelector('canvas'); const biggerCanvas = document.createElement('canvas'); const w = canvas.width + 60; const h = canvas.height + 60; biggerCanvas.width = w; biggerCanvas.height = h; const ctx = biggerCanvas.getContext('2d'); ctx.drawImage(canvas, 30, 30); ctx.beginPath(); ctx.rect(0, 0, w, 30); ctx.fillStyle = "black"; ctx.fill(); ctx.rect(0, 0, 30, h); ctx.fill(); ctx.rect(w - 30, 0, w - 30, h); ctx.fill(); ctx.rect(0, h - 30, w, h); ctx.fill(); document.body.append(biggerCanvas); //just to show it has drawn the border <canvas height="400" width="400" style="border: 30px solid black; border-radius: 5px; border-collapse: collapse;">Resolví mi problema con html2canvas aquí está mi código
html2canvas(canvas,{backgroundColor: "transparent"}).then(function (canvas) { var myImage = canvas.toDataURL(); downloadURI(myImage, `qr-pollective.png`); }); function downloadURI(uri, name) { var link = document.createElement("a"); link.download = name; link.href = uri; document.body.appendChild(link); link.click(); }