How to Build a Meme Generator with JavaScript (No Frameworks Project)

[@MotiviqueStudio]

Thanks for taking the time to do this. Ended up solving problems I was having combining fill and stroke. edit: I wrote a generator using a workaround with divs placed where the text is supposed to appear on the canvas. The div updates with elementById =, but the actual canvas isn't updated with the text until a generate function fires. Impact is the typical meme font, but it's not free. I used Anton, which works in a pinch.

[@stardustbiscuits]

Wdym it's not free?

[@cateva20]

how to use an image url link instead of local upload?

[@hot_milk4001]

this is mad great content champ

[@okanozusen9236]

I followed the steps but in the console i'm getting the message "cannot read properties of null (reading 'addEventListener') for when you do imageFile.Input.addEventListener. why is that?

[@monciego]

Thank you!

[@andreasdevjs298]

Great!!

[@yeseniaperez6999]

So when I attempt to replicate this generator, the image and the text do not display at all. I did console.log it and see the links. What could this be? Also, if anyone knows how to do this but instead adding an image's url that you can paste instead of uploading a file it would be very helpful.

[@thethapajii3607]

Please anyone explain me how can we download image?

[@numixmterials338]

Please make a video to export this meme

[@sabridhibi3177]

God i love this channel

[@sravani7273]

The font size is very small.. To change fontsize what I have to change .. Even I am changing the division factor of 10 the size of the letters are not increasing ... Instead of that the background is changing... Can anyone tell me if u know

[@STech04]

How can we download Meme image

[@finnbarm]

Use canvas.toDataURL("image/png") This returns a base64 string, which you can put in a HTML a tag with the download attribute

[@STech04]

@@finnbarm Thanks bro

[@manojbheemireddy]

@@finnbarm can you please elaborate little more, iam beginner, where should we add these lines

[@charliecode]

@@manojbheemireddy downloadBtn.addEventListener('click', function() { // Convert the combined canvas to an image and download it const downloadLink = document.createElement('a'); downloadLink.href = canvas.toDataURL(); downloadLink.download = 'result_image.png'; // Customize the downloaded file name downloadLink.click(); console.log(backgroundImage.width); }); ps: downloadBtn is your button than you can select with document.getElementById("Id_of_your_button")

[@Rahul-ps9jw]

Continue as React-js project

[@juhandvan]

so fun

[@charlenepeters2423]

Do you have a way that I can give a one-time contribution?

[@awesomeguy1411]

Great content! This one is actually pretty cool man - I wanna try it out one day if I ever get time 😂😂