Starting the download of the canvas featuring a stylish border design

Question

Starting the download of the canvas featuring a stylish border design

I'm facing an issue where the canvas border is not showing up when I download the canvas with a border. The border appears on the screen, but it doesn't get included in the downloaded canvas.

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)
}

console.log(canvas)

<canvas height="400" width="400" style="border: 30px solid black; border-radius: 5px; border-collapse: collapse;">

javascript html css canvas

Answer 1

Answer №1

To add a black border to your canvas, you can create a larger canvas with enough space for the border first.

Next, copy the content of your original canvas onto this larger canvas, but offset it by 30px to accommodate the border.

Then, draw the four black rectangles that will form the border around the content. This modified canvas with the border is the one you should use for downloading.

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;">

Answer 2

To add a black border to your canvas, you can create a larger canvas with enough space for the border first.

Next, copy the content of your original canvas onto this larger canvas, but offset it by 30px to accommodate the border.

Then, draw the four black rectangles that will form the border around the content. This modified canvas with the border is the one you should use for downloading.

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;">

Answer 3

Answer №2

My issue was resolved by using html2canvas. Below is the code I used:

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();   

    }

Answer 4

My issue was resolved by using html2canvas. Below is the code I used:

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();   

    }

Starting the download of the canvas featuring a stylish border design

Answer №1

Answer №2

Similar questions

Managing the width of an HTML table column based on its text content dynamically

How can I integrate live data from a MySQL database to automatically update tables on a website?

Vue watchers capturing original value prior to any updates

TestCafe has encountered an issue: "There are no tests available to run. This may be due to either the test files not containing any tests or the filter function being too

Utilizing the essential "required" attribute in HTML5 in conjunction with a submit Button

Exploring the history and present state of Vue lifecycle hooks

Obtaining attribute from an object using JQuery

Observing the vertical dimension of a VueJS element

Guide to removing a Firebase Storage directory using a Firebase Cloud Function?

utilizing staggered animations with three.js

Discovering methods to store browser credentials securely in jQuery

Exploring the ins and outs of webpage loading speed

Guide to redirecting on click when utilizing an iframe

Comparing strings in AngularJS

Array data causes tabs to be shown incorrectly

Preventing file overwriting using fs.writefile method

`Three.js and its efficient use of JavaScript for enhancing performance``

In Visual Studio, make sure to include a reference to AngularJS.min.js within another JavaScript file

What is the best way to determine if any of the list items (li's) have been marked as selected?

Tips for storing dynamic data in an array using JavaScript