code for an olb blog post

1.css

* {
  margin: 5px;
}

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

#imgSave { 
  display: block; 
}

#imgSave[disabled] {
  opacity: 0.5; 
}

label, div {
  font-weight: bold;
}

1.js

//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”);
  }
};

2.js

//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"); 
    }); 
  }); 
}

3.js

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

}

4.js

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

5.js

//Draw on the canvas
function drawOnCanvas(e) {
    var canvas = document.getElementById("canvas");
    var rect = canvas.getBoundingClientRect();
    var context = canvas. getContext("2d");
    
    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();
}

6.js

//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");
}

7.js

image.replace("image/png", "image/octet-stream");

window.location.href = image;

_htmlchallenge.html

<input id="fileImage" type="file" accept="image/*" />
<button id="imgSave" disabled="disabled">
<img id="image" alt="Drawing to save" src="#" />
<canvas id="canvas">