HTML5 Challenge #1 - The result

| 6 min read
Article main image for HTML5 Challenge #1 - The result

Two weeks One month (I decided to give one month as requested by many people) have passed since I put the first challenge online, so it’s now the time to show you my solution. On one side, for my own pleasure, I wanted to give a more than complete solution with many options, or different ways to do it. On the other side, too often I saw examples about a specific element of a programming language that were too complex. If you were a new developer, you can get lost easily with all the code just to find what you were looking for, so I decided to take the simpler path.

Because I know how the Internet is working, let me also specify that this is not considered as the ultimate, and perfect solution: this is the solution I made with my knowledges, and I will be more than happy to discuss it in the comment section. The last thing to take into consideration before we start: I suck with design, and it’s OK as the goal is not to have something pretty, but something functional. To make things clear, people who just want to play with the code can make it yours by cloning, forking, or downloading a copy of it from the repository on GitHub. For others, I’ll explain each part, and if you have any questions, please let me know in the comment section.

For the rest of the post, to save some space, I assume you know the basics of HTML, so I will paste or write only about things directly related to the challenge (example: I won’t paste the import statement for my own JavaScript file), but the sources on my GitHub profile are complete. Note also that all my code has been verified with the HTML W3c validator, CSS W3C validator, and JSLint (note that for JSLint you’ll never have a perfect validation with my code as I ignore some of the errors it’s reporting). I also make the code, and tested in on the latest releases (no nightly builds) of Internet Explorer, Firefox, Chrome, Safari, and Opera.

Let’s start with the HTML code:

https://gist.github.com/fharper/213a9b876a3ede3525fa9ee63e01a9a7#file-htmlchallenge-html

The of type file will give us the opportunity to open the image to draw on it. We won’t use a form here to load the file as we’ll use File API later. The