Djus,
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div>
<div id = "btn" width = "200" style = "background-color:khaki">
<p>TTT</p>
</div>
<div id = "cnvs" width = "900">
<canvas id="canvas" width="800" height="734" style = "border:1px solid red;"></canvas>
</div>
</div>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
window.onload=function(){
var img=new Image();
img.src = 'http://w7t.ru/zooms/7da1/7/6168262b44.jpg';
img.onload = function(){
ctx.drawImage(img, 50, 50);
console.log("onload");
ctx.fillStyle = "#006600";
ctx.fillRect(0, 0, 400, 400);
ctx.fillStyle = "#00F";
ctx.strokeStyle = "#F00";
ctx.font = "italic 30pt Arial";
ctx.fillText("TTTTTTtext", 20, 20);
}
}
canvas.onclick = function() {
var dataURL = canvas.toDataURL("image/jpeg");
var link = document.createElement("a");
document.body.appendChild(link);
link.href = dataURL;
link.download = "my-image-name.jpg";
link.click();
document.body.removeChild(link);
};
</script>
</body>
</html>