HTML5 canvas drawImage smooth transition

Question

My example usages:

Using mouse click and drag you can draw on canvas.

Using mouse wheel you can zoom-in and zoom-out.

My question: It's possible to make that before re-drawing with function drawImage it make's smooth transition between re-drawings. If it's possible how ?

Similar code: http://jsfiddle.net/59Bhb/3/

If I use mouse zoom in drawImage function on lines 237-238:

contextBg.beginPath();
contextBg.drawImage(canvasPaint, paskutinisX, paskutinisY, imageWidthZoomed, imageHeightZoomed);

There's two canvas one with original size and hidden. Another with scaled size. After drawing on first the second get's all info to re-draw scaled drawing. After making scale change's the number of pixel grows and vice versa.

markE markE · Accepted Answer · 2014-07-15T16:56:43

One way is to listen for mousewheel events and scale the image...

based on how many times the wheel has been moved
and based on which direction the wheel was moved

Scale the image in small increment so that the scaling will appear smooth.

Example code and a Demo: http://jsfiddle.net/m1erickson/aCt64/

// all browsers listen for mousewheel except FF

canvas.addEventListener('mousewheel',handleMouseScrollDirection, false);
canvas.addEventListener('DOMMouseScroll',handleMouseScrollDirection,false);

// listen for mousewheel events
// rescale based on the number of times the mousewheel event has been triggered

function handleMouseScrollDirection(e){

    var direction;
    if(e.wheelDelta){
        direction=(e.wheelDelta>0)?1:-1;
    }else{
        // FF does not have e.wheelDelta (it has e.detail instead)
        // FF e.detail is negative when scrolling up
        direction=(e.detail>0)?-1:1; 
    }

    // scale the image by 10% each time the mousewheel event is triggered
    scale+=direction/10;
    draw();
}

Full example code:

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var cw=canvas.width;
    var ch=canvas.height;

    var scale=1.00;
    var iw,ih;
    var img=new Image();
    img.onload=start;
    img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house100x100.png";
    function start(){

        iw=img.width;
        ih=img.height;

        // all browsers listen for mousewheel except FF
        canvas.addEventListener('mousewheel',handleMouseScrollDirection, false);
        canvas.addEventListener('DOMMouseScroll',handleMouseScrollDirection,false);
        //
        function handleMouseScrollDirection(e){
            var direction;
            if(e.wheelDelta){
                direction=(e.wheelDelta>0)?1:-1;
            }else{
                // FF does not have e.wheelDelta (it has e.detail instead)
                // FF e.detail is negative when scrolling up
                direction=(e.detail>0)?-1:1; 
            }
            console.log(direction);
            scale+=direction/10;
            draw();
        }

        draw();
    }

    function draw(){
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.drawImage(img,
            0,0,iw,ih,
            (cw-iw*scale)/2,(ch-ih*scale)/2,iw*scale,ih*scale
        );
    }

}); // end $(function(){});
</script>
</head>
<body>
    <h4>Use mousewheel to scale the image smoothly.</h4>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

HTML5 canvas drawImage smooth transition

2 Answers