[CONSULTA] Generar imágen grande a partir de canvas chico

[cemansilla]

Hola, estoy ante un problema que no logro resolver.

Tengo que generar una imágen final de 1200x630 a partir de 2 canvas que no necesariamente van a tener ese tamaño, por ejemplo al ver la aplicación desde un dispositivo móvil.

Esta es la parte de los canvas, voy dibujando fotos y elementos según acciones de los usuarios, esto funciona.

Código HTML:

<div>
    <canvas width="1200" height="630" id="canvas-foto">Tu navegador no soporta esta aplicaci&oacute;n</canvas>
    <canvas width="1200" height="630" id="canvas-marco">Tu navegador no soporta esta aplicaci&oacute;n</canvas>
    <canvas width="1200" height="630" id="canvas-wrapper">Tu navegador no soporta esta aplicaci&oacute;n</canvas>
</div>

<button id="btn_guardar">Guardar</button> 

Esta sería la parte del JS encargada de generar la imágen, para el ejemplo simplemente la suelto en pantalla, aunque ya la guardo en el servidor

Código HTML:

var canvas_marcos = document.getElementById("canvas-marco");
var ctx_marcos = canvas_marcos.getContext("2d");
var canvas_foto = document.getElementById("canvas-foto");
var ctx_foto = canvas_foto.getContext("2d");
var canvas_wrapper = document.getElementById("canvas-wrapper");
var ctx_wrapper = canvas_wrapper.getContext("2d");

$('#btn_guardar').click(function(){
    ctx_wrapper.drawImage(canvas_foto, 0, 0);
    ctx_wrapper.drawImage(canvas_marcos, 0, 0);

    var dataURL = canvas_wrapper.toDataURL();

    var img = new Image();

    img.onload = function(){
        document.body.appendChild(img);
    }
    img.src = dataURL;
});

Ahora tengo que implementar el responsive de esto, pero al reescalar el canvas el tamaño de la imágen final también cambiará, ¿cómo hago para obtener una imágen de 1200x630 a partir de un canvas más chico?

Aclaro que los elementos adentro de los canvas pueden ser reubicados por el usuario a través del drag & drop.

Saludos!