Failed to manipulate image with zoom button

Question

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
    <style>
        body {
            margin: 0px;
            padding: 0px;
        }

        #wrapper {
            position: relative;
            border: 1px solid #9C9898;
            width: 578px;
            height: 200px;
        }

        #buttonWrapper {
            position: absolute;
            width: 30px;
            top: 2px;
            right: 2px;
        }

        input[type =
        "button"] {
            padding: 5px;
            width: 30px;
            margin: 0px 0px 2px 0px;
        }
    </style>
    <script>
        function draw(scale, translatePos){
            var canvas = document.getElementById("myCanvas");
            var context = canvas.getContext("2d");
             var imageObj = new Image();

              imageObj.onload = function() {
                context.drawImage(imageObj, 69, 50);
              };
              imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';

            // clear canvas
            context.clearRect(0, 0, canvas.width, canvas.height);

            context.save();
            context.translate(translatePos.x, translatePos.y);
            context.scale(scale, scale);
            /*context.beginPath(); // begin custom shape
            context.moveTo(-119, -20);
            context.bezierCurveTo(-159, 0, -159, 50, -59, 50);
            context.bezierCurveTo(-39, 80, 31, 80, 51, 50);
            context.bezierCurveTo(131, 50, 131, 20, 101, 0);
            context.bezierCurveTo(141, -60, 81, -70, 51, -50);
            context.bezierCurveTo(31, -95, -39, -80, -39, -50);
            context.bezierCurveTo(-89, -95, -139, -80, -119, -20);
            context.closePath(); // complete custom shape
            var grd = context.createLinearGradient(-59, -100, 81, 100);
            grd.addColorStop(0, "#8ED6FF"); // light blue
            grd.addColorStop(1, "#004CB3"); // dark blue
            context.fillStyle = grd;
            context.fill();

            context.lineWidth = 5;
            context.strokeStyle = "#0000ff";
            context.stroke();*/
            context.restore();
        }

        window.onload = function(){
            var canvas = document.getElementById("myCanvas");

            var translatePos = {
                x: canvas.width / 2,
                y: canvas.height / 2
            };

            var scale = 1.0;
            var scaleMultiplier = 0.8;
            var startDragOffset = {};
            var mouseDown = false;

            // add button event listeners
            document.getElementById("plus").addEventListener("click", function(){
                scale /= scaleMultiplier;
                draw(scale, translatePos);
            }, false);

            document.getElementById("minus").addEventListener("click", function(){
                scale *= scaleMultiplier;
                draw(scale, translatePos);
            }, false);

            // add event listeners to handle screen drag
            canvas.addEventListener("mousedown", function(evt){
                mouseDown = true;
                startDragOffset.x = evt.clientX - translatePos.x;
                startDragOffset.y = evt.clientY - translatePos.y;
            });

            canvas.addEventListener("mouseup", function(evt){
                mouseDown = false;
            });

            canvas.addEventListener("mouseover", function(evt){
                mouseDown = false;
            });

            canvas.addEventListener("mouseout", function(evt){
                mouseDown = false;
            });

            canvas.addEventListener("mousemove", function(evt){
                if (mouseDown) {
                    translatePos.x = evt.clientX - startDragOffset.x;
                    translatePos.y = evt.clientY - startDragOffset.y;
                    draw(scale, translatePos);
                }
            });

            draw(scale, translatePos);
        };



        jQuery(document).ready(function(){
           $("#wrapper").mouseover(function(e){
              $('#status').html(e.pageX +', '+ e.pageY);
           }); 
        })  
    </script>
</head>
<body onmousedown="return false;">
    <div id="wrapper">
        <canvas id="myCanvas" width="578" height="200">
        </canvas>
        <div id="buttonWrapper">
            <input type="button" id="plus" value="+"><input type="button" id="minus" value="-">
        </div>
    </div>
    <h2 id="status">
    0, 0
    </h2>
</body>
</html>

The above code taken from this question, which works perfectly fine by simply copying all the code. My objective is to keep everything remaining the same but using an image instead of cloud shape that drew by context. I tried drawImage method and successfully draw the image but I couldn't zoom in/out or even drag anymore. May I know what's wrong with context?

Could you also/instead show the code that you got problem with? The code above, if working and from the example, can't help us much tracking down the error in your code :-) — , Sep 25 '13 at 03:54
@Ken-AbdiasSoftware: Actually both code for images and cloud are there, just comment either one of them. Anyway, I've commented out the cloud and showing the image instead. Hope it helps, thanks. — SuicideSheep, Sep 25 '13 at 03:59

score 1 · Accepted Answer · 2013-09-25T04:43:45.667

Ok, what happens in your code now is that you draw your image after the restore call has been called resulting in that nothing happens.

This is because the image loading is asynchronous.

What you need to do is to integrate the image loading so that it finishes earlier in the pipe-line, then use the image integrated in the scaling, for example by taking the image loading out of the draw function:

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var imageObj = new Image();

imageObj.onload = function() {
    /// now the image has loaded, now we can scale it
    draw();
};
imageObj.src = 'image-url';

function draw() {
    // clear canvas
    context.clearRect(0, 0, canvas.width, canvas.height);

    context.save();
    context.translate(translatePos.x, translatePos.y);
    context.scale(scale, scale);

    /// draw image here
    context.drawImage(imageObj, 69, 50);

    context.restore();
}

Then for each time you need to re-scale the image just call draw().

ONLINE DEMO HERE

Failed to manipulate image with zoom button

1 Answers1