Click here to Skip to main content
15,078,241 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
In my web application I need to upload an image into a html5 canvas and draw on that image and save it to the computer.

 <input type='file' id="fileUpload" 
<canvas id="colors_sketch"  width="800" height="600" style="background-color:#ffffff;"></canvas>  


function el(id) { return document.getElementById(id); } // Get elem by ID

       var canvas = el("colors_sketch");
       var context = canvas.getContext("2d");

       function readImage() {
           if (this.files && this.files[0]) {
               var FR = new FileReader();
               FR.onload = function (e) {
                   var img = new Image();
                   img.onload = function () {
                       context.drawImage(img, 0, 0,img.width,img.height,0,0,800,600);
                   img.src =;

       el("fileUpload").addEventListener("change", readImage, false);

Image uploading is done using the above way.What I want to is find a way to draw on the uploaded image.Can some one help please.
Suvendu Shekhar Giri 20-Nov-15 11:07am
uglsa 20-Nov-15 12:31pm
Nope. I want to draw dynamically. this one the drawing line is previously given.What I want is draw line by mouse click on the image

1 solution

Check this out on how to manage mouse events and draw lines on the canvas:[^]
uglsa 21-Nov-15 1:47am
Than you so much. It helps a lot

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900