Set/get name of an image take from canvas - image

Question

Hi nobody know how to get or maybe set the name of an image in a canvas?
i use this code to save a canvas as image, but i don't know how get the name of the image or how set .
My goal is to load a image or pdf, draw on it and save in another image or pdf.
var img = new Image();
var startimg="img/green.jpg";
$scope.image=startimg;
img.src = startimg;
var sourceCanvas = document.getElementById('signatureCanvas');
var context = sourceCanvas.getContext('2d');
var canvasFirma = document.getElementById('tempCanvas');
var contextFirma = canvasFirma.getContext('2d');
img.onload = function() {
sourceCanvas.width = img.width;
sourceCanvas.height = img.height;
//context.drawImage(img, 0, 0);
console.log('The canvas size is '+ sourceCanvas.width +'*'+ sourceCanvas.height);
console.log('The image size is '+ img.width +'*'+ img.height);
context.drawImage(img, 0, 0, img.width, img.height);
}
var signaturePad = new SignaturePad(canvasFirma);
$scope.clearCanvas = function() {
signaturePad.clear();
}
$scope.saveCanvas = function() {
$scope.clearSave = false;
$scope.FirmaBtn = true;
$scope.canvasSi = false;
//salvo la firma
var firma = signaturePad.toDataURL("image/jpeg");
$timeout( function(){
$scope.signature = firma;
if ($scope.signature) {
$scope.resizeCanvas();
}
}, 200);
};
//to merge canvas and image
var canvasF = document.getElementById("canvasFinale");
var ctx = canvasF.getContext("2d");
var img1 = loadImage('img/green.jpg', main);
/*this one "image.jpg" i need to get the name or give new one because this is for example*/
var img2 = loadImage('img/image.jpg', main);
var imagesLoaded = 0;
function main() {
imagesLoaded += 1;
if(imagesLoaded == 2) {
// composite now
ctx.drawImage(img1, 0, 0);
//questo da la transparenza magari toglierlo
ctx.globalAlpha = 0.5;
ctx.drawImage(img2, 0, 0);
}
}
function loadImage(src, onload) {
var img = new Image();
img.onload = onload;
img.src = src;
/*
canvasF.width = img.width;
canvasF.height = img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);
*/
console.log("src "+ src);
return img;
}
$timeout( function(){
$scope.signature = firma;
if ($scope.signature) {
$scope.resizeCanvas();
}
}, 200);
};
$scope.resizeCanvas = function () {
canvasFirma.width = canvasFirma.offsetWidth * ratio;
canvasFirma.height = canvasFirma.offsetHeight * ratio;
canvasFirma.getContext('2d').scale(ratio, ratio);
console.log("resize canvasFirma 2");
};

Answer 1

You can download the canvas image with a custom name by making use of the download attribute.
Codepen Example
var canvas = $("#canvas")[0];
var ctx = canvas.getContext('2d');
ctx.fillRect(10,10,10,10);
$("#download").on("click", function(e) {
$("#download").attr("download", "CustomName.png");
$("#download").attr("href", canvas.toDataURL().replace(/^data:image\/[^;]/, 'data:application/octet-stream'));
});