Help needed for Canvas / Zoom etc

Hello masters !

Please have a look at this page and also see the ORIGINAL image (link on the page below):

https://zeetest.000webhostapp.com/

There are couple of issues I am facing, and not sure what is wrong:

  1. First, when the page loads,the canvas is WHITE, and you have to left click the mouse and keep it clicked and MOVE in order to show the map. Not sure why and how its adding so much white space, as the original image does not have it.

  2. Next, You can see that original image quality is not bad, however when you Zoom in/out, the quality of the image in the canvas gets worst.

  3. Then you zoom in / zoom not, it changes the center of the image, not sure why.

Please guide me what I am doing wrong and what edits are required to resolve the above 3 issues.

Thank you
ZH

So my friend I think that I find something:first i made small chenges in your js code:

function draw(scale, translatePos){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
 
    // clear canvas
    context.clearRect(0, 0, canvas.width, canvas.height);
 
	context.save();
	context.translate(translatePos.x, translatePos.y);
	context.scale(scale, scale);
	
	context.drawImage(img, 0, 0, img.width,    img.height,     // source rectangle
                   0, 0, canvas.width, canvas.height); // destination rectangle;
  
    
	context.restore();
}
 
var initialize = (function(){
    var canvas = document.getElementById("myCanvas");
 
    var translatePos = {
        x: canvas.width/10,
        y: canvas.height/10 
    };
 
    var scale = 1.0;
    var scaleMultiplier = 0.92;
    var startDragOffset = {};
    var mouseDown = false;

	img = new Image();
	img.src = 'http://irlen.com/wp-content/uploads/2015/09/world-map-large.png';
 
    // 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);
}());

Note the changes in context.drawImage and the var translatePos.
Second the image that loading from url is 300x300px.If i download the original image then it has 1600x1135px.I suggest you to download the image and load it to script from an image file that you will have create.

1 Like

Thank you Boss, I will try your suggestions and will share the outcome !

Lots of RESPECT and thanks for your time Sir.

thanks you ! what i needed !!

Hi,

Unfortunately, the issue (bad quality) and (bad start of canvas) is still remains. You can see it here:

https://zeetest.000webhostapp.com/

Not sure why its not loading and drawing good image.

Are you downloaded the original image file?Make a test with another. jpg or .png file with higher resolution and tell me.
There are two separate width/height values for a canvas:

  1. The element, sized via the element’s style property or css. These dimensions are used for rendering the element within the document.
  2. The canvas area, sized with the width and height properties of the element. These dimensions are used for drawing on the canvas via its context.

Well yes you can check the source of that page. I downloaded that file and put that in images folder, and used that.

So what to do with the canvas height/width ?

Solved. I added comments inside the code for what I have done.

function draw(scale, translatePos){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");

    // clear canvas
    context.clearRect(0, 0, canvas.width, canvas.height);
 
	context.save();
	context.translate(translatePos.x, translatePos.y);
	context.scale(scale, scale);
	
	context.drawImage(img, 0, 0, img.width,    img.height,     // source rectangle
                   0, 0, canvas.width, canvas.height); // destination rectangle;
  
    
	context.restore();
}
 
var initialize = (function(){
    var canvas = document.getElementById("myCanvas");
    
    //I add at the canvas width and height dimensions based on window outer boundaries
    canvas.width=window.outerWidth;    
    canvas.height=window.outerHeight;
    ///////////////////////////////////
        
    //To center the img I divide the x and y 22 factor
    var translatePos = {
        x: canvas.width/22,
        y: canvas.height/22 
    };
    //////////////////////////////////////////////////////
    var scale = 1.0;
    var scaleMultiplier = 0.92;
    var startDragOffset = {};
    var mouseDown = false;

	img = new Image();
	img.src = 'https://zeetest.000webhostapp.com/images/world-map-large.png';
 
    // 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);
}());




1 Like

Perfect - yes that works ! Thanks a lot sir.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.