Skip to content

Instantly share code, notes, and snippets.

Last active April 21, 2019 17:59
What would you like to do?
code for an olb blog post
* {
margin: 5px;
#image {
visibility: hidden;
position: absolute;
left: 0px;
#imgSave {
display: block;
#imgSave[disabled] {
opacity: 0.5;
label, div {
font-weight: bold;
//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”);
//Load the image from the file input, and draw it to the canvas
function loadImage() {
var canvas = document.getElementById("canvas"); = "visible";
var htmlImage = document.getElementById("image"); = "hidden";
var reader = new FileReader();
reader.onload = (function(e) {
var image = new Image();
image.src =;
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");
//Start the drawing on the canvas
function startDrawOnCanvas() {
var canvas = document.getElementById("canvas"); = "pointer";
canvas.addEventListener("mousemove", drawOnCanvas);
//Stop the drawing on the canvasfunction
stopDrawOnCanvas() {
var canvas = document.getElementById("canvas"); = "default";
canvas.removeEventListener("mousemove", drawOnCanvas);
//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 -;
//Black is the default color, but for learning purpose
context.fillStyle = 'black';
context.arc(posX, posY, 5, 0, Math.PI * 2);
//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); = "visible"; = "hidden";
updateStatus("The image has been created, you can now right click, and save it", "green");
image.replace("image/png", "image/octet-stream");
window.location.href = image;
<input id="fileImage" type="file" accept="image/*" />
<button id="imgSave" disabled="disabled">
<img id="image" alt="Drawing to save" src="#" />
<canvas id="canvas">
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment