Всем Здрасте! Проблема такая:нужно создать много картинок с подписыванием нужного текста на самой картинке в определённых местах и соответственно сохранением картинки по нажатию. Хочу сделать поле с вводом необходимой информации и вырисовывать её на картинку, но это позже. Сейчас хотябы чтоб просто текст писался поверх картинки. Вставляю в канвас картинку и следом пытаюсь вставить текст но он прорисовывается под картинкой. как заставить картинку рисоваться первой а следом подписывать нужный текст в нужном месте на картинке? Пробывал и просто прорисовывать и через onload, чего то не получается. Не судите строго, в программирование валенок, чисто хочу облегчить немного работу.
Вод код:
<!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 = 'img/fric.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>