HTML5 Canvas try to get zoom effect instead of scaling just with div movement's (left, top)

Question

I try to get zoom effect instead of scaling just with div movement's (left, top) and increase canvas size:

i bind mouse click for this functionality:

first click works perfect (where i click there zoom in)

second click doesn't work (where i click not zoom in this position)

i need get zoom like this: http://phrogz.net/tmp/canvas_zoom_to_cursor.html but not use scale and translate i just need use $(div).css('left', 'xPX') and $(div).css('top', 'xPX');

/* DOCUMENTATION:
first click = 1.4 scale 
second click = 1.8 scale


i try to get zoom effect instead of scaling just with div movement's (left, top):

first click works perfect (where i click there zoom in)
second click doesn't work (where i click not zoom in this position)
*/

var canvas = document.getElementById('c');
var ctx    = canvas.getContext('2d');

$('#p').css('left', '100px');
$('#p').css('top', '100px');

var click = 0;
draw100Scale();

$(document).click(function(e) {
    var pos = getMousePos(e);
    
    
    if(click == 0) {
        /* FIRST CLICK == FIRST ZOOM */
        canvas.width = 700; //500 + 40% = 700
        canvas.height = 700; //500 + 40% = 700
    
        $('#p').css('left', $('#p').offset().left + $('#p').offset().left * 40 / 100 - pos.x * 40 / 100);
        
        $('#p').css('top',
        $('#p').offset().top + $('#p').offset().top * 40 / 100 - pos.y * 40 / 100);     
        draw140Scale();
        
        click++;    
    } else {
        /* SECOND CLICK = SECOND ZOOM */
        canvas.width = 900; //500 + 80% = 900
        canvas.height = 900; //500 + 80% = 900
        
        $('#p').css('left', $('#p').offset().left + $('#p').offset().left * 80 / 100 - pos.x * 80 / 100);
        
        $('#p').css('top',
        $('#p').offset().top + $('#p').offset().top * 80 / 100 - pos.y * 80 / 100); 
        draw180Scale();
        click++;
    }
});



/* FUNCTIONS */
function getMousePos(evt) {
    evt = evt.originalEvent || window.event || evt;

    if (evt.clientX !== undefined && evt.clientY !== undefined) {
        return {
            x: evt.clientX,
            y: evt.clientY
        };   
    }
}

function draw100Scale() {
    ctx.fillStyle = '#CECECE';
    ctx.fillRect(0, 0,  canvas.width, canvas.height);
    ctx.fillStyle = 'red';
    ctx.fillRect(100, 100, 100, 100);
    ctx.fillStyle = 'green';
    ctx.fillRect(100, 200, 100, 100);
    ctx.fillStyle = 'blue';
    ctx.fillRect(100, 300, 100, 100);
    
    ctx.fillStyle = 'yellow';
    ctx.fillRect(200, 100, 100, 100);
    ctx.fillStyle = 'pink';
    ctx.fillRect(200, 200, 100, 100);
    ctx.fillStyle = 'orange';
    ctx.fillRect(200, 300, 100, 100);
    
    ctx.fillStyle = 'violet';
    ctx.fillRect(300, 100, 100, 100);
    ctx.fillStyle = 'grey';
    ctx.fillRect(300, 200, 100, 100);
    ctx.fillStyle = 'white';
    ctx.fillRect(300, 300, 100, 100); 
}

function draw140Scale() {
    ctx.fillStyle = '#CECECE';
    ctx.fillRect(0, 0,  canvas.width, canvas.height);
    ctx.fillStyle = 'red';
    ctx.fillRect(140, 140, 140, 140);
    ctx.fillStyle = 'green';
    ctx.fillRect(140, 280, 140, 140);
    ctx.fillStyle = 'blue';
    ctx.fillRect(140, 420, 140, 140);
            
    ctx.fillStyle = 'yellow';
    ctx.fillRect(280, 140, 140, 140);
    ctx.fillStyle = 'pink';
    ctx.fillRect(280, 280, 140, 140);
    ctx.fillStyle = 'orange';
    ctx.fillRect(280, 420, 140, 140);
            
    ctx.fillStyle = 'violet';
    ctx.fillRect(420, 140, 140, 140);
    ctx.fillStyle = 'grey';
    ctx.fillRect(420, 280, 140, 140);
    ctx.fillStyle = 'white';
    ctx.fillRect(420, 420, 140, 140); 
}

function draw180Scale() {
    ctx.fillStyle = '#CECECE';
    ctx.fillRect(0, 0,  canvas.width, canvas.height);
    ctx.fillStyle = 'red';
    ctx.fillRect(180, 180, 180, 180);
    ctx.fillStyle = 'green';
    ctx.fillRect(180, 360, 180, 180);
    ctx.fillStyle = 'blue';
    ctx.fillRect(180, 540, 180, 180);
    
    ctx.fillStyle = 'yellow';
    ctx.fillRect(360, 180, 180, 180);
    ctx.fillStyle = 'pink';
    ctx.fillRect(360, 360, 180, 180);
    ctx.fillStyle = 'orange';
    ctx.fillRect(360, 540, 180, 180);
    
    ctx.fillStyle = 'violet';
    ctx.fillRect(540, 180, 180, 180);
    ctx.fillStyle = 'grey';
    ctx.fillRect(540, 360, 180, 180);
    ctx.fillStyle = 'white';
    ctx.fillRect(540, 540, 180, 180);    
}

* {
    margin: 0px;
    padding: 0px;
}

#c {
    position: absolute;
}

#p {
    position: absolute;
    left: 0px;
    top: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='p'>
    <canvas id='c' width='500' height='500'></canvas>
</div>

This previous post shows how to zoom without using transforms (translating+scaling). It uses positioning and the scaling version of `context.drawImage` instead: http://stackoverflow.com/questions/27339747/zoom-and-pan-in-animated-html5-canvas/27340533#27340533 — markE, May 26 '15 at 15:46
yes it's good example but it's can click only on the canvas, my example u can click out of range of the canvas on the document i try to calculate how much need positioniong left and right but i cannot get good result :/ math problem is.. — codelife, May 28 '15 at 07:04
I'm not quite sure what you're after, but canvas will accept drawing coordinates starting off the canvas itself. The canvas will then act as a "viewport" into the larger document. The canvas will show some of the content--kind of like `overflow:hidden`. For example: `context.fillRect(-50,0,200,100)` will show a 150x100 rect at the top left of the canvas. The canvas will happily accept that the rect starts off-canvas. Just listen for mouse events on the document instead of the canvas. ;-) — markE, May 28 '15 at 15:58

HTML5 Canvas try to get zoom effect instead of scaling just with div movement's (left, top)

0 Answers0