Canvas Recording is black.

[sanpangzi]

Hi muaz,
I meet a question in some days that I record the canvas's background is black by record-canvas-drawings.html. by your help, I improve the part code is as follow in record-canvas-drawings.html:
` var recorder;
(function looper() {
//ignore on stopRecording
if (!recorder) return;
var canvas = window.canvasElementToBeRecorded;
var context = window.context;

    context.fillStyle = 'white';
    context.fillRect(0, 0, canvas.width, canvas.height); // fill white background
    // now add video frames or animation
    window.canvasElementToBeRecorded.getContext('2d').drawImage(canvas, 0, 0, canvas.width, canvas.height);
    requestAnimationFrame(looper);
})();`

document.getElementById('start').onclick = function() {
    document.getElementById('start').disabled = true;
    
    recorder = new RecordRTC(window.canvasElementToBeRecorded, {
        type: 'canvas',
        disableLogs: false
    });

    recorder.startRecording();
    setTimeout(function() {
         document.getElementById('stop').disabled = false;
    }, 1000);
};`

and in canvas-designer.js, I add a variable window.context is as follow:
var context = getContext('main-canvas'),
tempContext = getContext('temp-canvas');
window.canvasElementToBeRecorded = context.canvas;
window.context = context;
In function looper，if I don’t comment out the code ‘if (!recorder) return;’ and when I finished the recording, recording file’s background-color is still black. But if I comment out the code ‘if (!recorder) return;’ and I can’t write any thing in canvas and I press F12,I can always see the console.log in the loop.
I also have studied your RecordRTC. js, but I have not solved the problem of recording background color. Can you tell my mistake? Looking forward to your reply.

[muaz-khan]

Please try this demo:

• https://www.webrtc-experiment.com/RecordRTC/Canvas-Recording/record-canvas-drawings.html

Source code is updated as well:

• Canvas-Recording/record-canvas-drawings.html
• Canvas-Recording/canvas-designer.js

Relevant commit: e859926

Added following snippet in the canvas-designer.js#L90 to support white background:

context._clearRect = context.clearRect;
context.clearRect = function(x, y, width, height) {
    context._clearRect(0, 0, context.canvas.width, context.canvas.height);
    fillStyle = 'white';
    context.fillRect(0, 0, context.canvas.width, context.canvas.height); // fill white background
}

[sanpangzi]

Thank you very much, muaz. I use your code and realize record canvas+microphone，and when I finish the recording and play the recording file, its background-color is white. Of course, I also can set to be other color.Thank you again, muaz.

[sanpangzi]

Now I know a new method for white background. Why would a white background be created when recording canvas? Because the background is transparent，so if we replace all the transparent background with white, the recording file will is white background.
the core code is follow:
var imageData = context.getImageData(0, 0, canvas_width, innerHeight); for(var i = 0; i < imageData.data.length; i += 4) { // When the pixel is transparent, it is set to white if(imageData.data[i + 3] == 0) { imageData.data[i] = 255; imageData.data[i + 1] = 255; imageData.data[i + 2] = 255; imageData.data[i + 3] = 255; } } context.putImageData(imageData, 0, 0);

[chenweigh]

record canvas to gif, and it's background color is black.
How to solve it?
please help me.