Creative Commons: http://www.w3.org/html/logo/

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. If you want to test my code, it’s also live.

Let’s start with the HTML code:

<input id="fileImage" type="file" accept="image/*" />
<button id="imgSave" disabled="disabled">

<img id="image" alt="Drawing to save" src="#" />
<canvas id="canvas">

The <input> 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 <button> element will give us the opportunity to take the draw on the <canvas> element, and fire up some JavaScript code that will create the image we’ll be able to save. For now, it is disable as we didn’t load an image yet, so this button is useless. The <canvas> element will let the user draw on the image we’ll load. Last but not least, the <img> element where we will load the result of our saved image so users will be able to load it. Nothing very exciting there, but you have the first step to a successful challenge. Now, let’s take a look at where all the magic happens, the JavaScript file:

    //Add the events at the loading of the page
    window.onload = function() {
        //Using Modernizr to verify if the browser support canvas & FileApi
        if (Modernizr.canvas && !!window.FileReader) {

            //Since we are using HTML5, we don't have to support < IE9 (no attachEvent)
            document.getElementById("fileImage").addEventListener("change", loadImage);
            document.getElementById("canvas").addEventListener("mousedown", startDrawOnCanvas);
            document.getElementById("canvas").addEventListener("mouseup", stopDrawOnCanvas);
            document.getElementById("imgSave").addEventListener("click", saveImage);
        }
        else {
            //We disable elements as they can't use them
            document.getElementById("imgSave").disabled = true;
            document.getElementById("fileImage").disabled = true;
            updateStatus("You browser doesn't support the canvas element or the File API", "red");
        }
    };

The first thing is to prepare our application to react to different events. Right before, we’ll check if the browser supports canvas by using a subset of Modernizr, and if the browser support also the File API. If it’s the case, let’s add a simple change event on the file input so we’ll be able to load the file when the user will select one. We’ll add mouseup, and mousedown events to the canvas so we know when the user will draw on it. Last but not least, we’ll add a click event to the generate button to fire up the function that will save the image from the canvas. If the browser use by the user don’t support canvas or File API will disable elements on the page, and let him know about the fact he can’t use our application. The second part of the code is the function that will load the file loaded by the user into the canvas element.

    //Load the image from the file input, and draw it to the canvas
    function loadImage() {
        var canvas = document.getElementById("canvas");
        canvas.style.visibility = "visible";

        var htmlImage = document.getElementById("image");
        htmlImage.style.visibility = "hidden";

        var reader = new FileReader();

        reader.readAsDataURL(document.getElementById('fileImage').files[0]);

    	reader.onload = (function(e) {
            var image = new Image();
            image.src = e.target.result;

            image.onload = (function() {
                //Get the Canvas, and set the size of the images we got
                canvas.height = image.height;
                canvas.width = image.width;

                //Set the image element to the same size
                htmlImage.height = image.height;
                htmlImage.width = image.width;

                var context = canvas.getContext("2d");
                context.drawImage(image, 10, 10);

                document.getElementById("imgSave").disabled = false;
                updateStatus("The image has been loaded, you can now draw on it", "green");
            });
        });
    }

The first thing to do is to make sure that the canvas element is visible, and the img is not. It’s not critical, but I added these lines of code to make sure the users can use the tool more than once without having to refresh the page. The magic happens at line 9, where I started to access the file with the FileReader, and I’ll start to read it with the readAsDataURL. After this, I’m setting an event handler once the operation will be successfully completed. In that case, I want to load the image that I accessed with the input field of type file. Once the image is loaded, I’ll resize the canvas element with the size of the image the user selected, so it will work with any image size as little or as large they will be. I’ll do the same with the hidden img element that I’ll use later to create the modified image. Last, but not least, because the canvas itself have no drawing abilities, we need to get one of his context, in our case, the 2d one, and use some script to do it. By using getContext on the canvas I’m able to draw on it, like drawing the image I built a couple lines before.

Now, I need to let the user draw on the canvas so I defined the startDrawOnCanvas function that I used in the first JavaScript code of this post.

    //Start the drawing on the canvas
    function startDrawOnCanvas() {
        var canvas = document.getElementById("canvas");
        canvas.style.cursor = "pointer";
        canvas.addEventListener("mousemove", drawOnCanvas);</pre>
updateStatus("");
}

There is nothing complicated here: I’m setting a listener on mousemove on the canvas element, so if the user moves his mouse over the canvas when the mouse was down (remember the listener I added at the beginning), the function drawOnCanvas will be fired up. I did the same thing to stop the drawing by removing the same listener when the mouse is up.

//Stop the drawing on the canvas
function stopDrawOnCanvas() {
var canvas = document.getElementById("canvas");
canvas.style.cursor = "default";
canvas.removeEventListener("mousemove", drawOnCanvas);
}

Now, let’s check one of the biggest function, or I should say, one of the most important one for this challenge, the drawing function.

<em id="__mceDel"> //Draw on the canvas
function drawOnCanvas(e) {
var canvas = document.getElementById("canvas");
var rect = canvas.getBoundingClientRect();
War context = canvas. getContext("2d");</em>

var posX = e.clientX - rect.left;
var posY = e.clientY - rect.top;

//Black is the default color, but for learning purpose
context.fillStyle = 'black';

context.beginPath();
context.arc(posX, posY, 5, 0, Math.PI * 2);
context.closePath();
context.fill();
}

Actually, it seems worse than it is. Firstly, let’s get some data to draw on the canvas. We need to access the left, and top from the canvas, since the position of the mouse will be relative to the left top corner of the browser window. Once we have those positions, we can start to draw by, of course, getting the 2d context again. In my code, I used the fillStyle function to set the color to black, but it’s just for this challenge purpose, as the default color is already black.

The fun begins with the beginPath function. I would have been able to use something simpler like fillRect, but I figured out that if we are going to have only one tool to draw, a circle would be better. To create a circle, we need to create a path by starting it with the begin function, and closing it with the close one. Everything between those two functions will make our path, in that case, an arc. The function takes 5 parameters: the x coordinate where we will start the drawing, the y coordinate where we will start the drawing, the radius of the circle (5 is totally arbitrary, I thought the size was good enough for drawing), the starting angle (in radians – we’ll start at 0), and the end angle (also in radians – Math. PI *2 will make a full circle). In theory, you can also add a last optional parameter to tell the function to draw counter-clockwise, but it changed nothing in our case. At the end, we are calling the fill function to render the path we just created.

The last JavaScript function is the one I used to create the img the user will be able to save.

//Saving the image
function saveImage() {
document.getElementById("imgSave").disabled = true;
var canvas = document.getElementById("canvas");

var htmlImage = document.getElementById("image");
htmlImage.src = canvas.toDataURL("image/png");

//canvas.parentNode.removeChild(canvas);
htmlImage.style.visibility = "visible";
canvas.style.visibility = "hidden";

updateStatus("The image has been created, you can now right click, and save it", "green");
}

In that case, the only important lines are 6, and 7. We are setting the src of our hidden img by creating an image from the canvas element using the toDataUrl function. After this, the user will be able to right-click where he was drawing, and save the file. Another solution would have been to use a trick with window.location.href (see the code below), but it’s not implemented in all browsers yet.

image.replace("image/png", "image/octet-stream");
window.location.href = image;

For this not so beautiful HTML page, I used very little CSS.

* {
	margin: 5px;
}

#image {
	visibility: hidden;
	position: absolute;
	left: 0px;
}

#imgSave {
	display: block;
}

#imgSave[disabled] {
	opacity: 0.5;
}

label, div {
	font-weight: bold;
}

Let’s start with the #image one. I’m telling the browser to hide the element when it’s loaded, and set to an absolute position at 0 pixels from the left. It will give me the opportunity to have the image the user will save, and the canvas element one over the other, so when the user will ask to save the image, he won’t have to deal with an element elsewhere in the page. Not critical, but I thought it would give a better experience. As for the rest, nothing complicated here. Oh, maybe you didn’t see a lot of attribute selector, like the [disabled] I used with #imgSave. It just means that if this element have this attribute, this CSS will be rendered.

That’s it, you now have a simple HTML page that lets the users load an image, draw on it, and save the new masterpiece to his computer. So did you do the challenge? If you did, please share your result with us in the comment section. Did you had any problem? Do you find anything that I can improve? Do you have any challenge you would like to see? Did you find this one useful? Share your thoughts, and keep looking at my site for the next one.

P.-S.: It’s a pain in the ass to find a good code plugin for WordPress, so hope you’ll like the one I choose. I replaced the one I had, as this one is better, and it’s the less worse I found!

--
HTML5 Challenge #1 – The result is a post on Out of Comfort Zone from Frédéric Harper

Depuis quelques semaines, nous avons (Microsoft) une salle nommée le BizSpark lounge (en anglais) à la maison Notman. Un minimum d’une fois par semaine, je me rends sur place pour rencontrer des entrepreneurs, discuter technologies et tout simplement être présent pour connecter avec les gens du milieu du Web à Montréal. Malgré le fait que j’ai toujours gardé un oeil attentif sur le milieu des startups, ce n’est que depuis peu que j’y suis beaucoup plus initié.

En effet, la maison Notman est le nid de FounderFuel, un programme d’accélération d’entreprise de Real Venture. Étant présent assez souvent, j’ai eu l’occasion de discuter avec des entrepreneurs, des VCs, de voir comment le programme fonctionne un peu, de ressentir l’énergie des gens qui participe à FounderFuel… bref, de vivre un peu cette culture dont on entend tant parler. Je dois dire que ce milieu m’intéresse de plus en plus et que je suis bien content d’avoir une bonne relation avec les gens de la maison Notman, FounderFuel, Real Venture et de la fondation OSMO qui est derrière le projet de la maison. Cela me permet, bien sûr de faire mon travail en tant qu’Évangéliste en soutenant les startups avec des programmes tels que BizSpark, mais aussi, en m’imprégnant de cette culture tout en la découvrant toujours un peu plus. Je ne me souviens plus comment je suis tombé sur cet article de Jobboom qui a fait un projet de série Web sur la première cohorte de FounderFuel, mais je n’ai écouté que les 2 premiers épisodes et j’ai eu envie de la partager avec vous.

--
FounderFuel et l’entrepreneuriat à Montréal is a post on Out of Comfort Zone from Frédéric Harper

--
Tips and tricks for people #34 is a post on Out of Comfort Zone from Frédéric Harper

Copyright: http://chowproductions.com/

Part of the first event we did a couple of weeks ago in Toronto with our friends of DevTO, HTML5 Toronto, and JavaScript Toronto, I also did a presentation on how to design a Windows Store application. It was a mix of good practices for the UI, the UX, and the integration you should do with the Windows 8 features to give a great experience to your users.

I’m no way near to be a design expert (trust me, I suck to design beautiful applications), but as a developer, and a user, I know what makes a good experience, and I know when an application sucks. Developers tend to minimize the impact of the details by considering the fact that their application has all the amazing features a customer who needs. Let me tell you this: if your application is ugly, don’t give me a good experience or have no integration with the platform, people won’t use it. They will check for alternative, and you will lose a user. So thanks again to Matthew Potter who recorded my afternoon second session (my morning session) at our installfest.

--
Designing a Windows Store app is a post on Out of Comfort Zone from Frédéric Harper

--
Tips and tricks for people #33 is a post on Out of Comfort Zone from Frédéric Harper

Copyright: http://j.mp/17f6Kh3

You are so passionate! It’s Saturday morning, a bit of drool near your mouth, your pillow printed on your face, and you are still sleeping? Never mind, Fred will start the day by giving you the same effect as if you were dancing with leprechaun in a pool filled with coffee! HTML5? CSS3? JavaScript? All those amazing technologies are making the party with the latest version of Windows, and it’s a festivity you don’t want to miss. The good fortune may be at your door, so let’s explore why you should be as excited building apps than a unicorn in Wonderland…

This, was the abstract I sent to the guys from DevTO, HTML5 Toronto, and JavaScript Toronto before they announced the Windows 8 workshop they done with us, Make Web Not War, 3 weeks ago. My role, do the keynote to get people excited about developing for the platform, and wake up people on this lovely Saturday morning. So based on what I sent, I had to build the proper deck, that you can view in my previous blog post. I think it’s a 15+ minutes presentation I can still iterate to make it more exciting, but from the feedbacks I had, I think it was successful! Thanks again to Matthew Potter who recorded the presentation during the day.

--
Building Windows Store Apps, More Exciting Than A Unicorn in Wonderland is a post on Out of Comfort Zone from Frédéric Harper

--
Fred’s tees #13 – Funkalicious is a post on Out of Comfort Zone from Frédéric Harper

A picture of me in 2010 when I was a entrepreneur http://j.mp/11zneMu

I don’t know why, but I have something with blog post series. I have tips and tricks for people, show me your book, Fred’s tees, HTML5 challenges, and now, so you want to series… This one is all about giving some food for thought on some of the questions or comments I usually have. I started this series with the Evangelist role, and I’ll continue with working at home, as it’s quite often a topic people want to talk about.

Firstly, let me tell you one thing: working at home doesn’t mean you can do everything you want. In theory, you can, but you’ll have to live with the consequences. Usually, the jobs that give you the opportunity to do so are based on a trust relationship between you, and your employer. There are some pros, and cons, like with anything, that you need to keep in mind. Let me give you some of those based on my own experience. It has been mostly 5 years now that I don’t have to go work in an office: 1 when I was working for IBI Solutions, 1 when I was a freelancer, and more than 2 as a Microsoft employee. Since the beginning, I saw the good, the bad, and the ugly.

The good

• Saving time: if everything goes wrong between my bed, and my office, it can take me up to 5 minutes. If I compare this to the 1 hour of drive in traffic or public transit I had to do before, I can save up to 9 hours per week. It’s a lot of time.
  
• No lunches: I can eat whatever I want as I don’t have to prepare stuff the evening before, so it’s easier for me to eat healthier as I had the bad habit to go to restaurants instead of bringing a lunch with me.
• Flexibility: depends on your job, you may not have to be in front of the computer from 8:00 to 17:00 so that mean you can easily go to the dentist, be there for the delivery of a package… At the end, the important thing is to be sure to do what you have to do at the end of the day (week) if you take some time for personal things during the day.
• Productivity: don’t get me wrong, I like people, but it’s a lot easier to be productive when nobody can interrupt you at any time.

The bad

• Productivity: you really need to be responsible as distractions are everywhere. A full day of work can easily disappear with many things you can do at home. You’ll tell me that Facebook, and Cie can do the same at work, but you need a lot more discipline at home as your boss won’t be there to watch you. I need to say that a couple of years ago, it was not easy. Now with experience, and a couple of tips, and tricks, it’s working perfectly.
• Co-workers: I said in the good, that you can be more productive because there is less interruption, but on the other side, you won’t see your co-worker too much. For someone like me, who like people, but also who consider most co-workers as friends, it’s no easy task. Let’s just say that you need to cherish the moment you are all together! Some people may argue that it’s not that easy to work remotely, but if you have the right tools, and work with people who are used to work remotely, it’s not a problem.
• Physical health: by working at home, I do a lot less exercises. That may seem ridiculous, but trust me, you walk a lot less, and you can feel it at some point. The trick here is to try to stay active in other parts of your life, like going to the gym.
• Psychological health: since you woke up in your house, work in your house, eat in your house, relax in your house, and sleep in your house, you are always in your house. At some point, you’ll need to go out. So put some stuff in the evening in your calendar, just so you can get out of your home, and see some people.
• Flexibility: I said it’s a good thing as you save some time, but it’s also a trap you can fall into. Since you are not at the office, I hear some people that had the impression they were doing not enough like people at the office, so they worked a lot more. Also, you need to have a separate room for your office, so you can cut from work, and personal stuff. Even with this, it’s easy to sneak in, and finish a project at 9pm, because the work is at 1 minute of walk.

The ugly

• Personally I think there is no ugly part of working at home. Of course, you can make it ugly, but even with the bad part I listed above, nothing you can change, and make it an advantage. I would say that with the experience, all the bad points I listed, aren’t bad anymore for me.

There are also a lot of benefits for the employer. It will save cost with furnitures, office space… The employee will also produce more as he will work when he’ll really be productive. The work/life balance is also really important, so saving a couple of hours per week is not something to neglect. Last, but not least, with everything put together, there is a lot of chances that the employee will be more than happy. Of course, I said it before, it will work only, and only if there is a trust relationship between both parts, and this won’t work if your manager is the kind of manager who like to micromanage.

So at the end, that may or may not be for you. Some people can’t work at home, some others can’t go back full time in an office (like me!). If you want to work from home, there may be a way for you to get it done. Do you see any other good, bad or ugly points that I missed? Would you like to work from home? What is your plan to make it happen? Are you working from home? Share your thoughts!

--
So you want to work at home? is a post on Out of Comfort Zone from Frédéric Harper

Copyright Chow Productions Inc.: http://chowproductions.com/

In March, I was in Toronto for a Windows 8 event that DevTO, HTML5 Toronto, and JavaScript Toronto made in collaboration with us, Make Web Not War. The event was a mix of installfest, hackathon, and some presentations. I started the day with an introduction to Windows 8, and how to build amazing applications with HTML5, CSS3, and JavaScript. As I like to scale online with in-person events, I was happy to see that Matthew Potter was streaming the event online, and kept a copy for on-demand viewing. Let’s start this Monday with some Windows 8 love with my always sexy English accent!

P.S.: I like this picture so much, thanks Chow Productions Inc.

--
HTML5 & Windows 8, friends with benefits is a post on Out of Comfort Zone from Frédéric Harper

--
Soyez remercié comme il se doit is a post on Out of Comfort Zone from Frédéric Harper