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

Tips for managing lag caused by large raw image re-renders in a React application

Send the user to a customized dashboard depending on their user role permissions using Vue.js

How to Target a Specific Element Using its Class with jQuery

Tips on creating a literal type that is determined by a specific value within an object

Trigger the phone to vibrate once the animation has completed. This feature will only activate upon clicking the button

Using jQuery UI datepicker - how to set a parameter based on a specific condition

Creating a designed pattern for a textbox: Let's get creative with your text

A step-by-step guide on integrating Google Tag Manager with a NextJS website

Creating a Full Page Background Image That Fits Perfectly Without Resizing or Cropping

What are the placeholders for the "localIdentName" query tag in a custom CSS-loader for Webpack?

Struggling to center with margin 0 auto

Discrepancy in CSS rendering in Chrome and Firefox

Issues with Internet Explorer causing headaches with CSS :first-child selector malfunctioning, experiencing strange behavior when utilizing Google Web Fonts

Ways to retrieve the highest date value in an array

Dealing with TypeScript and the Mongoose loadClass problem

Hero Sticky Transition with 100vhDivElement

Creating a full-width input field with text aligned to the right:

Looking for a unique Full Screen Crosshair Cursor with either HTML5 or JQuery?

Flipping the camera rotation matrix in three.js

The HTML checkbox is initialized as checked when the page loads