在本地将画布转换为图像数据

Question

目前，我正在从事一个本机反应项目，我的要求是在画布上绘制一些图像，文本，小部件，然后将该画布转换为图像类型数据（JPEG / PNG）或Base64数据，以便我们可以将其呈现出来。

我在画布上呈现的代码段是-

    canvas.width = 300;
    canvas.height = 300;
    const context = canvas.getContext('2d');

    context.fillStyle = 'yellow';
    context.fillRect(0, 0, canvas.width, canvas.height)

    context.fillStyle = 'red';
    context.arc(50, 50, 49, 0, Math.PI * 2, true);
    context.fill();

现在我想将此画布转换为图像类型数据（JPEG / PNG / BASE64）

代码段

canvas.toDataURL('image/jpeg', 1.0)
        .then((data) => {
            data = data.substring(1);
            data = data.slice(0, -1);

            if (data.indexOf('data:image/jpeg;base64,') > -1) {
                // Removing "data:image/jpeg;base64," for saving into file as base64 data
                data = data.substring(23);
            }

            RNFetchBlob.fs.writeFile("/storage/emulated/0/Download/atar.png", data, 'base64')
                .then((data) => {
                    // Image data saved and has 200x4 pixels width and 300x2 pixels height
                })
        })

此代码成功创建了.png文件。但是图像大小与画布大小完全不同（300 * 300）。

我的要求是创建分辨率与画布相同的图像。 预先感谢。