set background color to save canvas chart

Question

Im using ChartJS and saving them locally, converting the chart image on canvas to data blob and then save it. But I'm having trouble setting background color of whatever canvas chart im saving, i can only save the chart without background color, confusing the user.

What I've tried so far was:

1. Change the type of image/png to image/jpg
2. Create a document with a style and append it as a child to my document.createElement which is going to have the image
3. give style to my 'link' that is equal to the document.createElement above

But no success, the image is corrctely downloaded without background.

i was searching and found some topic:

create a canvas with background image and save

save canvas with background image

but, at the end of all the work, wasn't abble to find the solution for me.

My chart on html is:

<canvas id="divName"></canvas>

the typescript function to save the image, creating a new blob with bytearray and the type of the image is: (that code has all the tries to add background color)

saveimg(divName){
      let canvas:any;

        let style = document.createElement('style');
        style.type = 'text/css';
        style.innerHTML = '.cssClass { background-color: "aquamarine"; }';

        if(this.deviceValue != null) {
          canvas = document.getElementById(this.deviceValue);
      }
      else {
          canvas = document.getElementById(divName);
      }

//SOLUTION that works BY Caleb Miller ***********
fillCanvasBackground(canvas, 'white');

function fillCanvasBackground(canvasc, color)
{
   const context = canvasc.getContext('2d');
   context.save();
   context.globalCompositeOperation = 'destination-over';
   context.fillStyle = color;
   context.fillRect(0, 0, canvasc.width, canvasc.height);
   context.restore();
}
// end***********************

        let dataURL = canvas.toDataURL();
        let datablob = dataURL.substring(dataURL.indexOf(",") + 1);

     let byteCharacters = atob(datablob);
     let byteNumbers = new Array(byteCharacters.length);
     for (let i = 0; i < byteCharacters.length; i++) {
         byteNumbers[i] = byteCharacters.charCodeAt(i);
     }

     let byteArray = new Uint8Array(byteNumbers);
     let blob = new Blob([byteArray], {"type": "image/jpg"});


     if(navigator.msSaveBlob){
         let filename = this.chartTitle + ' - ' + this.entityName;
         navigator.msSaveBlob(blob, filename);
     } else {
         let filename =this.chartTitle + ' - ' + this.entityName;
         let link = document.createElement("a");

         link.onload = function() {
             canvas.drawImage(0,0);
         };

         document.getElementsByTagName('a')[0].appendChild(style);
         link.href = URL.createObjectURL(blob);
         link.setAttribute('visibility','hidden');
         link.download = filename;
         link.style.backgroundColor = "lightblue repeat-x center";

         document.body.appendChild(link).style.background = "lightblue repeat-x center";
         link.click();
         document.body.removeChild(link);
     }
        this.deviceValue = null;
    }

Images to express the problem:

on the site the image is:

when i download it

is it possible to add background color to a canvas image?

Froma

Answer 1

As you discovered, canvas.toDataURL() does not capture any visual styling applied via CSS. It only captures the raw pixel data from the bitmap backing the canvas instance. This is by design.

In order to use a custom background color, you need to draw it directly to the canvas. Here is an example of a function that fills the background of a given canvas with a given color. My inline comments should explain how it works.

function fillCanvasBackgroundWithColor(canvas, color) {
  // Get the 2D drawing context from the provided canvas.
  const context = canvas.getContext('2d');

  // We're going to modify the context state, so it's
  // good practice to save the current state first.
  context.save();

  // Normally when you draw on a canvas, the new drawing
  // covers up any previous drawing it overlaps. This is
  // because the default `globalCompositeOperation` is
  // 'source-over'. By changing this to 'destination-over',
  // our new drawing goes behind the existing drawing. This
  // is desirable so we can fill the background, while leaving
  // the chart and any other existing drawing intact.
  // Learn more about `globalCompositeOperation` here:
  // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
  context.globalCompositeOperation = 'destination-over';

  // Fill in the background. We do this by drawing a rectangle
  // filling the entire canvas, using the provided color.
  context.fillStyle = color;
  context.fillRect(0, 0, canvas.width, canvas.height);

  // Restore the original context state from `context.save()`
  context.restore();
}

To use the function, call it before your save code, giving it the chart canvas and a color. It should look something like this:

const canvas = document.getElementById('yourCanvasId');
fillCanvasBackgroundWithColor(canvas, 'aquamarine');
// ...the rest of your save code

The saved image should have a background color.

Cathycathyleen

I just took this code, put it in a plugin registered to the afterRender event. It works a treat. See my combination solution over at: https://mcmap.net/q/672670/-how-to-save-chart-js-charts-as-image-without-black-background-using-blobs-and-filesaver Thank you. – Adkinson

Answer 2

I'm leaving this here, since I bumped onto an easier alternative solution that at least worked for me.

When I used chartCanvas.toDataURL("image/jpeg", 1.0); My colors were all messed up just like the OP.

Just switching to png worked for me. No plugins or extra work. Just changing to chartCanvas.toDataURL("image/png", 1.0); made the dataUrl output look exactly like my chart.

Sivia

thank you for you solution, i didn't try to change the image to png bacause the requirements where jpeg images only. – Froma