HTML5 drawImage - Not working in Chrome while dragging

Im trying to drag and drop an image in canvas. But when dragging in chrome the image disapears but in Mozilla it works fine. Any help on this would be really appreciated.

HTML File

<head>
    <script>
        var canvasImages = [];

        function imageProp() {
            this.imgName = ' ';
            this.imgX = 0;
            this.imgY = 0;
            this.ImgWidth = 1;
            this.ImgHeight = 1;
        }

        function GetFilename(url) {
           if (url) {
              var m = url.toString().match(/.*\/(.+?)\./);
              if (m && m.length > 1) {
                 return m[1];
              }
           }
           return "";
        }

        function load(source) {
            var canvas = document.getElementById("mycanvas");
            var ctx = canvas.getContext('2d');
            var imageObj = new Image();

            //Loading image to Canvas
            imageObj.onload = function () {
                ctx.drawImage(imageObj, 0, 0);
            };
            imageObj.src = source;

            //Inserting properties of image loaded in canvas to an array
            var Property = new imageProp;
            //Property.imgName = GetFilename(source);
            Property.imgName = source;
            Property.imgX = 0;
            Property.imgY = 0;
            Property.ImgWidth = imageObj.width;
            Property.ImgHeight = imageObj.height;
            canvasImages.push(Property);
        }
    </script>
</head>

<body>
    <img id = "imgID" onclick=" load(this.src)" src = 'download.png'/>
    <canvas id="mycanvas" width="1000" height="1000">HTML5 Not Supported</canvas>
    <script src="Canvas_js.js"></script>
</body>

Javascript file

(function () {

"use strict";
/*global document*/
/*global clear*/
/*global canvasImages*/
/*jslint devel: true */
/*jslint browser: true */

var canvas, ctx, ghostcanvas, gctx, RedrawInterval = 20, canvasValid = false, clickLoc = {}, isDragging = false, index = 0, selectedIndex = 0;
clickLoc.x = 0;
clickLoc.y = 0;

function drawCanv() {
    var i = 0, imageObj;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (i = 0; i < canvasImages.length; i += 1) {
        imageObj = new Image();
        imageObj = document.createElement('img');
        imageObj.src = canvasImages[i].imgName;
        imageObj.onload = function () {
            ctx.drawImage(imageObj, canvasImages[i].imgX, canvasImages[i].imgY);
        };
    }
}

function resizeHandler(index) {
    ctx.beginPath();
    ctx.strokeRect(canvasImages[index].imgX, canvasImages[index].imgY, canvasImages[index].ImgWidth + 5, canvasImages[index].ImgHeight + 5);
}

function canvasOnClick(e) {
    var rect, i = 0;
    isDragging = true;

    //Get X and Y coordinates of the click
    rect = canvas.getBoundingClientRect();
    clickLoc.x = e.clientX - rect.left;
    clickLoc.y = e.clientY - rect.top;

    //Check whether any image is clicked
    for (i = 0; i < canvasImages.length; i += 1) {
        if (clickLoc.x >= canvasImages[i].imgX && clickLoc.x <= canvasImages[i].imgX + canvasImages[i].ImgWidth && clickLoc.y >= canvasImages[i].imgY && clickLoc.y <= canvasImages[i].imgY + canvasImages[i].ImgHeight) {
            selectedIndex = i;
            resizeHandler(i);
        }
    }
}

function canvasMouseUp(e) {
    isDragging = false;
}

function canvasMouseMove(e) {
    if (isDragging === true) {
        canvasImages[selectedIndex].imgX += 5;
        drawCanv();
    }
}

function init() {
    // Defining Canvas and fake canvas
    canvas = document.getElementById('mycanvas');
    ctx = canvas.getContext('2d');
    ghostcanvas = document.createElement('canvas');
    ghostcanvas.height = canvas.height;
    ghostcanvas.width = canvas.width;
    gctx = ghostcanvas.getContext('2d');

    // Redrawing canvas for the interval
    //setInterval(draw, RedrawInterval);

    // Adding Eventlisteners
    canvas.addEventListener("mousedown", canvasOnClick, false);
    canvas.addEventListener("mouseup", canvasMouseUp, false);
    canvas.addEventListener("mousemove", canvasMouseMove, false);
}

init();

}());

Answers


Start messing around with

user-select: none; 
-webkit-user-select: none;

in your css.


Need Your Help

Memory error at python

python python-2.7 python-3.x

from __future__ import division