-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
31 lines (23 loc) · 1011 Bytes
/
script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// script.js
const canvas = document.getElementById('memeCanvas');
const context = canvas.getContext('2d');
const image = new Image();
image.src = 'meme_template.png'; // Replace with the correct path to your image
image.onload = () => {
context.drawImage(image, 0, 0, canvas.width, canvas.height);
};
function generateMeme() {
const topText = document.getElementById('topText').value;
const bottomText = document.getElementById('bottomText').value;
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(image, 0, 0, canvas.width, canvas.height);
context.font = '30px Arial';
context.fillStyle = 'white';
context.strokeStyle = 'black';
context.textAlign = 'center';
context.lineWidth = 2;
context.fillText(topText, canvas.width / 2, 40);
context.strokeText(topText, canvas.width / 2, 40);
context.fillText(bottomText, canvas.width / 2, canvas.height - 20);
context.strokeText(bottomText, canvas.width / 2, canvas.height - 20);
}