<!-- Create a canvas to combine text and image -->
<canvas id="myCanvas" width="450" height="600">
</canvas>
<!-- Script for displaying the current date in dd-mm-year format -->
<script>
var d = new Date();
var month = new Array("01","02","03","04","05","06","07","08","09","10","11","12");
var tt = d.getDate() + "." + month[d.getMonth()] + "." + d.getFullYear();
</script>
<script>
/* Transfer the value of the current date to the canvas, and transform it into a picture */
var cx = document.getElementById("myCanvas").getContext("2d");
cx.font = "15pt Arial";
cx.fillText(tt, 62, 300);
/* In order for the date to be on top of the piece of paper, move the element to the foreground */
cx.globalCompositeOperation = "destination-over";
/* Add a picture of our dude with a document to the canvas */
var canvas = document.getElementById("myCanvas"),
context = canvas.getContext("2d");
var img = new Image();
img.src = "https://i.imgur.com/TCDGYdh.png";
/* Move the picture with the dude to the background */
img.onload = function() {
var pattern = context.createPattern(img, "no-repeat");
context.fillStyle = pattern;
context.fillRect(0, 0, 450, 600);
};
</script>I apologize for the welter, I'm just learning. :)
I want to make a picture on which the date will change every day, in accordance with the actual date. I tried create a picture via canvas in HTML with JS.
Please take a look at my code, I have detailed everything there with the comments.
I would like to have a link to this picture, which can be coppied, and everyday the date on the picture must be actual.
So, what I want. I want the resulting picture, when the right mouse button is pressed, to have option 'Copy image address', like this: How I want it to be
As you can see, my current result picture looks like this: As I have now
