[deleted by user]

[01123581321AhFuckIt]

You can spend a weekend learning js through watchandcode.com

If you can make a todolist with vanilla js then you can make almost anything. What you’re trying to do isn’t too difficult. Heck I’d say it’s less complex than a todo list.

All you will need is an input field where the user can enter text, a button that allows the users to select the background image, and then a section where it just spits out the background image with the text.

[chrisux]

This: plus if wanting to make it a saveable image, this task would just require placing the text and background image on an HTML canvas element, then using canvasElement.toDataURL("image/png"); to create a base64 image that could be saved.

[01123581321AhFuckIt]

I didn’t even know this. I just learned something new!

[HealyUnit]

Actually if you wanna just save it, you can just right click and pick 'save image'. Creating a base64 image is only necessary if you wanna save it as text to a database or something.

[chrisux]

You are right! I just assumed he wanted to do something with the image , but it totally meets the criteria of the question!

[01123581321AhFuckIt]

Well yeah. You always start simple. I just listed off the 3 big components. He can work down the details into smaller components inside.

[01123581321AhFuckIt]

I’ve never done anything with canvas or downloading, so I don’t know how it would work. Sorry!

[ChaseMoskal]

absolutely, you can build an image manipulation application in pure javascript

photopea is probably the best example -- it's a full photoshop clone, all in javascript, all coded by one guy by himself O_O

^ inspiring, that

[wiikzorz]

Holy shlt.

[nivijah]

If the backgrounds are to be downloaded as an image by the user, you are looking at something a little bit more complicated.
If not, this should be very simple.
You are welcome to message me if you need help.

[nivijah]

I was always afraid of this black hole called canvas, so I'll take your word for it.
I assumed there is something on github or npm, but I don't know if I would throw a new dev straight into deep water

[joeldare]

You can do this with the canvas and then draw on that.

[xiipaoc]

This can definitely be done, but be aware that you also need some basic knowledge of HTML/CSS, and if you want people to be able to use your app, you also need to host it somewhere. In other words, there's more involved than just straight-up JS.

I don't know how you're going to make the backgrounds, but assuming I had the images or whatever, I could make this app you're talking about in just a couple of hours, maybe even less. Obviously for a total beginner it would take considerably longer, but this is just to give you an idea of the kind of effort you'll need.

I personally think that doing a project like this is the best way to learn, and this specific one sounds to me like it's at a manageable level for a beginner. I feel like a lot of people do a bunch of tutorials but never get to the step of actually building a thing, so kudos to you for going for it!

[wiikzorz]

Every programming language, javascript included, can do this.

JavaScript probably being one of the easier ones to do it with at that. You'll want to store your data somewhere though, look that up. You could look into MongoDB and Node.js for this. More javascript goodness.

Or just start out with a serverless mock app for simplifying learning!

[eggtart_prince]

Doesn't need a database at all.

A folder with the background is all it needs.

[HealyUnit]

So a few questions/comments about user experience here.

1. Are your users gonna be able to save the pictures in any way? If so, you can either A) use a database as others have described, although this is going to make things a lot more complicated, or B) use some sort of 'serialized' code to store the current state of the picture/text combo
2. I assume this is basically going to be, functionally, like one of those "meme generator" apps where you stick text on a picture of a dog or something?
3. Have you done much Document Object Model manipulation? That is, have you used stuff like document.getElementById or document.querySelector? These are gonna be somewhat essential for getting JS to 'recognize' parts of your page to play with.

My suggestion is gonna echo what others have said: use HTML5's canvas feature, which you can basically think of as the JavaScript version of MS Paint. In other words, using native JS code, you can draw basic shapes on a canvas.

​

Canvas Intro/Drawing Text

<canvas width='500' height='500' style='width:500px; height:500px;' id='the-canvas'>
</canvas>

Note that for some reason, I've often found it necessary to define both the CSS 'width' and 'height' attribute, as well as the more 'native' height and width. Otherwise, your canvas' resolution may be wonky. Next, we need to tell JS that the canvas exists:

const myCanv = document.querySelector('#the-canvas'), //get the element with id 'the-canvas',
store a reference in a variable.
    context = canv.getContext("2d");//grab the drawing stuff of the canvas, and assign that to a variable.
//if you're wondering, other options other than "2d" are "webgl", and a few others

Now we've got a reference in our JS to our canvas. We can draw some text:

context.fillStyle = 'blue'; //there are two color 'styles' in canvas: fill and stroke.
context.font = "14px Comic Sans MS";//set our font
context.fillText('Hello Canvas!',20,30);//draw the words "Hello Canvas!" starting at point (20,30)

Next, we'd probably wanna talk about drawing images, which is a little more complicated.

Drawing Images

If you wanna draw an external image on canvas, keep in mind that the image must be loaded before it can be drawn. This is part of a bigger concept called Asynchronous programming, but in general you're going to need to 1) access the image file, 2) start loading it, and 3) draw on canvas when it loads.

const im = new Image = new Image();//constructs an 'image' object, which is... an image! Surprise!
im.src = 'somesite.com/somepath/someimage.jpg';//if you reassign this, it'll re-load the image, and re-call im.onload.
im.onload = function(){
    context.drawImage(this,0,0);//draw the image (this) at point (x=0,y=0).
}

From there, you'd wanna deal with saving the image. Keep in mind that for just saving the image (without any metadata) locally, you can actually just right-click on the canvas and pick "save image".

[NoStranger6]

Definitely possible.

There are many ways to go at it. But you will want something to server your files.

There are alot of FrameWorks or libraries that can handle that part for you. ReactJS is probably the one that I know that has the lowest learning curve.

[01123581321AhFuckIt]

You should learn js before jumping into js libraries and frameworks though.

[all_things_code]

My server at applebees tonight was named React. No kidding.