Export Canvas with Raster Image to png with Paper.js - image

Question

I am new to Paper.js, I am creating a simple drawing tool using paper.js and download the canvas with the background image. I'm trying filesaver.js and blob however, I'm stuck downloading the canvas with a raster image as background.
Any help or suggestions would be highly appreciated.
I tried:
'''
HTML:
//button to download
<button href="#" class="btn btn-primary" id="save-canvas"
onclick="exportPNG()">Save</button>
//canvas
<canvas class="canvas" resize id="canvas"></canvas>
//image
<img src="image/image.jpg" id="image">
JS:
function exportPNG() {
var canvas = document.getElementById('canvas');
canvas.toBlob(function (blob) {
saveAs(blob, 'paper.png');
});
}
// Setup Paper
paper.setup(document.querySelector('canvas'));
//Image Layer
var imageLayer = new Layer({insert: false});
var image = new Raster('image');
image.position = view.center;
project.layers.push(imageLayer);
imageLayer.addChild(image);
imageLayer.activate();
'''

Answer 1

If I understand your request, you can do this quite simply.
There are some gotchas though like the fact that you need to wait for the image to be loaded and for the scene to be drawn before exporting the canvas content as image...
Here is a sketch demonstrating one way of doing it.
// Create a raster that will be used as background.
const raster = new Raster({
crossOrigin: 'anonymous',
source: 'http://assets.paperjs.org/images/marilyn.jpg',
position: view.center
});
// Wait for the raster to be loaded...
raster.onLoad = () => {
// ...and center it.
raster.position = view.center;
// Draw a circle over it.
new Path.Circle({
center: view.center,
radius: 50,
fillColor: 'blue'
});
// Make sure that the scene is drawn on the canvas.
view.update();
// Create a blob from the canvas...
view.element.toBlob((blob) => {
// ...and get it as a URL.
const url = URL.createObjectURL(blob);
// Open it in a new tab.
window.open(url, '_blank');
});
};