настройка цвета фона холста

Question

Я рисую графики таймсеров с Chart.js, который использует <canvas> для рисования. Наши пользователи хотели бы иметь возможность загружать изображения этих графиков в свои отчеты. Фон сайта темный, поэтому сами графики используют светло-серые цвета. Это означает, что когда пользователи щелкают правой кнопкой мыши (в Chrome) и выбирают «сохранить изображение как ...», они получают прозрачное изображение с серой/белой строкой (очевидно, не очень заметно).

Я пытался переопределить canvas.toDataURL, чтобы нарисовать прямоугольник сначала as in this post, но переопределение не работает (я предполагаю, что он не доступен для записи). Есть ли другой способ сделать это?

Answer 1

Это должно сделать трюк:

function getCanvasImage(_ctx, _bgColor){ 
    var tmpCtx = document.createElement("canvas").getContext("2d"); 
     tmpCtx.canvas.width = _ctx.canvas.width; 
     tmpCtx.canvas.height = _ctx.canvas.height; 
     tmpCtx.fillStyle = _bgColor; 
     tmpCtx.fillRect(0, 0, tmpCtx.canvas.width, tmpCtx.canvas.height); 
     tmpCtx.drawImage(_ctx.canvas, 0, 0); 

    return tmpCtx.canvas; 
    } 

// ... 
// just call the function passing your canvas context and the background color 
var graphImage = getCanvasImage(ctx, "#222");