Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

set background color to save canvas chart

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?

like image 601
Bruno Avatar asked Apr 30 '18 16:04

Bruno


People also ask

How do I change the background color in Figma canvas?

Change a background color by de-selecting any layers and using the color picker from the Background section of the right sidebar. If you like having rulers visible on your canvas, you can use the Shift + R shortcut to enable them. You can also use the search feature under the menu icon to search for rulers.

How do you change the background color and pattern of a chart?

On the Fill tab, under Background Color, pick the color you want. To use a pattern with two colors, pick a color in the Pattern Color box, and then pick a pattern in the Pattern Style box. To use a pattern with special effects, click Fill Effects, and then pick the options you want.


1 Answers

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.

like image 97
Caleb Miller Avatar answered Sep 23 '22 15:09

Caleb Miller