Загрузка холста в PNG разрешение и аспект Raito

Question

Я пытаюсь составить svgs на несколько элементов canvas, когда я загружаю веб-страницу с помощью JQuery, а затем загружаю их как PNGS.

я сталкиваюсь с двумя проблемами - то, что svgs составлен, кажется очень низким разрешением / размытым. затем, когда я загружаю изображения, все они имеют размер 300 x 150 пикселей. Я прочитал, что это размер по умолчанию, при котором создаются элементы canvas, и хотя мой код, кажется, изменяет размер, я думаю, что он просто масштабирует его.

Есть ли способ установить размер холста, чтобы он не был пикселизирован, а затем загрузить его с таким большим размером?

Я добавил свой код ниже, за исключением пары ненужных элементов. любая помощь приветствуется - спасибо!

for(var i = 0; i<10; i++){

arr = shuffle(arr);

var elementID = 'canvas' + i;

// creating canvas
$('<canvas>').attr({
    id: elementID
}).width(1224)
.height(768)
.appendTo('#flags');

var canvas = document.getElementById(elementID);
var context = canvas.getContext('2d');
context.fillStyle = 'white';
context.fillRect(0, 0, canvas.width, canvas.height);

// randomly assign suffixes
var sources = {};    
sources['image-1'] = 'img/'+arr[0]+'.svg';
sources['image-2'] = 'img/'+arr[1]+'.svg';
sources['image-3'] = 'img/'+arr[2]+'.svg';

// adding svg to canvas
loadImages(context, sources, function(context, images) {  
    context.globalCompositeOperation="multiply";
    context.drawImage(images.image_1, 0, 0, canvas.width, canvas.height);
    context.drawImage(images.image_2, 0, 0, canvas.width, canvas.height);
    context.drawImage(images.image_3, 0, 0, canvas.width, canvas.height);
});

// adding link to download canvas
$("#flags").append("<a data-id='"+elementID+"' class='link'>export</a>")

}


function loadImages(context, sources, callback) {
    var images = {};
    var loadedImages = 0;
    var numImages = 0;
    // get num of sources
    for(var src in sources) {
        numImages++;
    }
    for(var src in sources) {
        images[src] = new Image();
        images[src].onload = function() {
            if(++loadedImages >= numImages) {
                callback(context, images);
            }
        };
        images[src].src = sources[src];
    }
}

// click link to download image
$('.link').click(function() {
  var id = $(this).data('id');
  this.href = $('#'+id)[0].toDataURL();// Change here
  this.download = 'design-'+id+'.png';
});