Add annotation to image with canvas on small screen without resizing

Question

I hope you can help me with my problem. I am writing a mobile application with cordova and ionic and we need a function to annotate images before we upload them.

I want to be able to add annotations to an image (at the moment only lines) without resizing the image. But since the screenspace on phones is small i am now using 2 canvas directly placed above each other.

One the first one i render the scaled down image i want to annotate, on the 2nd one i make the annotations. Then i render the original image on 3 canvas and upscale the annotations to the size of the original image.

var finalcanvas = document.createElement('canvas');
    var ctxfinal = finalcanvas.getContext("2d");
    var imageObj = new Image();

    imageObj.onload = function() {
        finalcanvas.width = imageObj.width;
        finalcanvas.height = imageObj.height;

        ctxfinal.drawImage(imageObj, 0, 0, imageObj.width, imageObj.height);
        var canvaslines = document.getElementById("canvasdraw");
        ctxfinal.drawImage(canvaslines, 0, 0, imageObj.width, imageObj.height);

        $scope.editimage.image = finalcanvas.toDataURL("image/jpeg");

This works fine, but the only downside is that the annotations are rather pixely. I assume there must be a library or something which should make things like this easier, but no matter how much i searched i could not find anything. But maybe i used the wrong keywords since i am not a very adept programmer and not a native speaker. Thanks for all your help in advance

Edit: Here is a link to a jsfiddle of my code http://jsfiddle.net/q97szydq/14/

Answer 1

One solution would be to store all your points into an array, then redraw them on your new canvas (after you rescaled the points) :

var drawnLines = [];
//in your start functions :  
drawnLines.push(["m", x, y]);

//in your move functions :  
drawnLines.push(["l", x, y]);

//then in your hideModal function :  
var ratio = finalcanvas.width/document.getElementById("canvasdraw").width;
ctxfinal.lineWidth = 3*ratio;

for(i=0; i<drawnLines.length; i++){
        var xm = drawnLines[i][1]*ratio;
        var ym = drawnLines[i][2]*ratio;

        switch (drawnLines[i][0]){                  
            case "l" : ctxfinal.lineTo(xm, ym);
            case "m" : ctxfinal.moveTo(xm, ym);
            }
        }

ctxfinal.stroke();

  ctx = document.getElementById("canvasdraw").getContext("2d"); ctx2 = document.getElementById("canvasimg").getContext("2d"); ctx.strokeStyle = "#ffffff"; ctx.lineWidth = 3; var imageObj = new Image(); imageObj.onload = function() { //ion-header-bar var MAX_WIDTH = 300; var MAX_HEIGHT = 500; tempW = imageObj.width; tempH = imageObj.height; if (tempW > tempH) { if (tempW > MAX_WIDTH) { tempH *= MAX_WIDTH / tempW; tempW = MAX_WIDTH; } } else { if (tempH > MAX_HEIGHT) { tempW *= MAX_HEIGHT / tempH; tempH = MAX_HEIGHT; } } document.getElementById("canvasdraw").height = tempH; document.getElementById("canvasdraw").width = tempW; document.getElementById("canvasimg").height = tempH; document.getElementById("canvasimg").width = tempW; ctx2.drawImage(imageObj, 0, 0, tempW, tempH); }; imageObj.src = "http://images2.fanpop.com/image/photos/12900000/Cute-kittens-12929201-1600-1200.jpg"; // setup to trigger drawing on mouse or touch drawTouch(); drawPointer(); drawMouse(); var drawnLines = []; //all draw functions have minus 50px height to adjust for header // prototype to start drawing on touch using canvas moveTo and lineTo function drawTouch() { var start = function(e) { ctx.beginPath(); x = e.changedTouches[0].pageX; y = e.changedTouches[0].pageY - 50; ctx.moveTo(x, y); drawnLines.push(["m", x, y]); }; var move = function(e) { e.preventDefault(); x = e.changedTouches[0].pageX; y = e.changedTouches[0].pageY - 50; ctx.lineTo(x, y); ctx.stroke(); drawnLines.push(["l", x, y]); }; document.getElementById("canvasdraw").addEventListener("touchstart", start, false); document.getElementById("canvasdraw").addEventListener("touchmove", move, false); }; // prototype to start drawing on pointer(microsoft ie) using canvas moveTo and lineTo function drawPointer() { var start = function(e) { e = e.originalEvent; ctx.beginPath(); x = e.pageX; y = e.pageY - 50; ctx.moveTo(x, y); drawnLines.push(["m", x, y]); }; var move = function(e) { e.preventDefault(); e = e.originalEvent; x = e.pageX; y = e.pageY - 50; ctx.lineTo(x, y); ctx.stroke(); drawnLines.push(["l", x, y]); }; document.getElementById("canvasdraw").addEventListener("MSPointerDown", start, false); document.getElementById("canvasdraw").addEventListener("MSPointerMove", move, false); }; // prototype to start drawing on mouse using canvas moveTo and lineTo function drawMouse() { var clicked = 0; var start = function(e) { clicked = 1; ctx.beginPath(); x = e.pageX; y = e.pageY - 50; ctx.moveTo(x, y); drawnLines.push(["m", x, y]); }; var move = function(e) { if (clicked) { x = e.pageX; y = e.pageY - 50; ctx.lineTo(x, y); ctx.stroke(); drawnLines.push(["l", x, y]); } }; var stop = function(e) { clicked = 0; }; document.getElementById("canvasdraw").addEventListener("mousedown", start, false); document.getElementById("canvasdraw").addEventListener("mousemove", move, false); document.addEventListener("mouseup", stop, false); }; var hideModal = function() { var finalcanvas = document.getElementById("finalcanvas"); var ctxfinal = finalcanvas.getContext("2d"); var imageObj = new Image(); imageObj.onload = function() { finalcanvas.width = imageObj.width; finalcanvas.height = imageObj.height; ctxfinal.drawImage(imageObj, 0, 0, imageObj.width, imageObj.height); ctxfinal.beginPath(); var ratio = finalcanvas.width / document.getElementById("canvasdraw").width; ctxfinal.lineWidth = 3 * ratio; for (i = 0; i < drawnLines.length; i++) { var xm = drawnLines[i][1] * ratio; var ym = drawnLines[i][2] * ratio; switch (drawnLines[i][0]) { case "l": ctxfinal.lineTo(xm, ym); case "m": ctxfinal.moveTo(xm, ym); } } ctxfinal.stroke(); //I then generate aa image from this final canvas. So now i have the image in the original size + the sadly a bit pixely annotations //$scope.editimage.image = finalcanvas.toDataURL("image/jpeg"); }; imageObj.src = "http://images2.fanpop.com/image/photos/12900000/Cute-kittens-12929201-1600-1200.jpg"; }; 

 canvas { border: 1px solid #000; } 

 <div id="page"> <div class="buttons" style="height:50px;"> <button class="button button-clear" onclick="hideModal()">save</button> </div> <canvas id="canvasimg" style="position:absolute;z-index:1;"></canvas> <canvas id="canvasdraw" style="position:absolute;background:transparent;z-index:99;"></canvas> </div> <div style="position:absolute;top:300px;"> <canvas id="finalcanvas"></canvas>