A couple days ago, I made a jsfiddle that allowed me to make a canvas in html, choose some colors, and choose sizes for brush strokes. The actual implementation was pretty weak, as it didn't allow one to save any of the work. That makes it a nice toy, but certainly not useful for anything more.
All of that changed with today's project. I did not add any backend, so my program is only able to save doodles as long as your window is open, but that is essentially the first step to adding many more. For now, I am only using circles, although it would be somewhat trivial (I think) to add in the ability to make squares or other interesting shapes and save them.
The trickiest part for me was determining the architecture and learning how to set and manipulate global variables. I ultimately chose to make a variable that can save the current id and increments with each clearing of the board.
var saveId = {value: 0,
increment: function() {
this.value = this.value+1;
this.positions.push({});
},
positions: [{}]
};
I used this global variable to create new elements for saving, and to keep track of the position. I added in some buttons here and there, and gave the user an option to clear, but getting to this point was certainly the trickiest part. I might try to incorporate this to a game that uses a backend at some point, but I am probably done for now anyway.
The entire fiddle can be found here.