CODEWITHSUNDEEP
javascripthtmlhtml5-canvas
MJQ
MJQ

Reputation: 1786

Image flickers during drag in canvas

I am dragging an image within a canvas. But during the drag image flickers. I think there is some problem in function calling. I have implemented functions with onmousedown, onmouseup and onmousemove events. I am drawing the image onto canvas during drag.

Here is my code,

<html>
    <head>
    </head>
    <body>
    <div>
    <canvas id="canvas5" height="500" width="500" style = "position:relative;left:500px; border:2px  solid black;"> This text is displayed if your browser does not support HTML5 Canvas. </canvas>
    </div>
    <script type="text/javascript">
    var x2 = 100;
    var y2 = 100;
    var ctx; 
    var can;  
    var img=new Image();
    function drawcan() {
    can = document.getElementById("canvas5");
    ctx = can.getContext('2d');
    ctx.clearRect(0, 0, 500, 500);
    img.onload = function(){
    ctx.drawImage(img,x2 - img.width/2,y2 - img.height/2, img.width,img.height);
    };
    img.src="images/213.jpg";
    };

    function myMove(e){
    x1 = e.pageX - x2 - can.offsetLeft;
    x2 = x2 + x1;
    y1 = e.pageY - y2 - can.offsetTop;
    y2 = y2 + y1;
    drawcan();
    };

    function myDown(e) {
    if (e.pageX < x2 + img.width/2 + canvas5.offsetLeft)
    if (e.pageX > x2 - img.width/2 + canvas5.offsetLeft)
    if (e.pageY < y2 + img.height/2 + canvas5.offsetTop)
    if (e.pageY > y2 - img.height/2 + canvas5.offsetTop){ 
    can.onmousemove = myMove;
    };
    };  

    function myUp(e){
    can.onmousemove = null;   
    };

    drawcan();
    can.onmousedown = myDown;
    can.onmouseup = myUp;
    </script>
    </body>
    </html>

Upvotes: 5

Views: 1765

Answers (1)

Bergi
Bergi

Reputation: 664196

function drawcan() {
    can = document.getElementById("canvas5");
    ctx = can.getContext('2d');
    ctx.clearRect(0, 0, 500, 500);
    img.onload = function(){
        ctx.drawImage(img,x2 - img.width/2,y2 - img.height/2, img.width,img.height);
    };
    img.src="images/213.jpg";
};

See what this does? Every time you call drawcan, it loads the image before painting it somewhen later. Of course, the image is cached, but this process needs its time. Instead, wait for the image to load before doing anything, and then never load it again.

var img = new Image(),
    load = false,
    can = document.getElementById("canvas5"),
    ctx = can.getContext('2d');
img.onload = function() {
    load = true;
    drawcan(); // init
};
img.src="images/213.jpg";

function drawcan() {
    if (!load) return;
    ctx.clearRect(0, 0, 500, 500);
    ctx.drawImage(img, x2 - img.width/2,y2 - img.height/2, img.width,img.height);
};

Upvotes: 7

Related Questions