Question

45

Make image drawn on canvas draggable with JavaScript

rated 0 times [ 49] [ 4] / answers: 1 / hits: 54626 / 11 Years ago, sat, february 23, 2013, 12:00:00

I was able to successfully draw an image on an HTML canvas. But I need to be able to drag the image about on the canvas.

I know this function can be implemented easily by some JavaScript libraries like KinectJS. But I want to just do it with simple JavaScript.

window.onload = function(){

var canvas = document.getElementById(myCanvas);

var context = canvas.getContext(2d);

var destX = 0;

var destY = 0;

var imageObj = new Image();



imageObj.onload = function(){

  context.drawImage(imageObj, destX, destY);

};

imageObj.src = westeros.png;

<canvas id=myCanvas height=1024 width=360></canvas>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

raveno

Add To Favorites

Follow

Total Points: 453

Total Questions: 92

Total Answers: 92

Location: France

Member since Thu, Oct 27, 2022

2 Years ago

raveno questions

1 Webpacker error related to module babel-plugin-syntax-dynamic-import

Wed, Jun 24, 20, 00:00, 4 Years ago

1 Problem with using map to populate select in React / Material UI

Sat, Feb 29, 20, 00:00, 4 Years ago

1 How to use a Global Variable in Jest

Fri, Dec 20, 19, 00:00, 5 Years ago

1 No node found for selector in headless true mode of puppeteer

Thu, Sep 26, 19, 00:00, 5 Years ago

1 How to fix Uncaught TypeError: Cannot read property 'Timestamp' of undefined?

Sat, Jun 22, 19, 00:00, 5 Years ago

View All

answered 12 Years ago ninaemiliaj · Accepted Answer

To do dragging you handle 3 mouse events:

mousedown -- set a flag indicating that the drag has begun.

mouseup -- clear that drag flag because the drag is over

mousemove -- if the drag flag is set, clear the canvas and draw the image at the mouse position

Here is some 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 img = new Image();

    img.onload = function(){

        ctx.drawImage(img, 0,0);

    };

    img.src = http://images.christmastimeclipart.com/images/2/1271716593176_1788/img_1271716593176_17881.jpg;



    var canvas=document.getElementById(canvas);

    var ctx=canvas.getContext(2d);

    var canvasOffset=$(#canvas).offset();

    var offsetX=canvasOffset.left;

    var offsetY=canvasOffset.top;

    var canvasWidth=canvas.width;

    var canvasHeight=canvas.height;

    var isDragging=false;



    function handleMouseDown(e){

      canMouseX=parseInt(e.clientX-offsetX);

      canMouseY=parseInt(e.clientY-offsetY);

      // set the drag flag

      isDragging=true;

    }



    function handleMouseUp(e){

      canMouseX=parseInt(e.clientX-offsetX);

      canMouseY=parseInt(e.clientY-offsetY);

      // clear the drag flag

      isDragging=false;

    }



    function handleMouseOut(e){

      canMouseX=parseInt(e.clientX-offsetX);

      canMouseY=parseInt(e.clientY-offsetY);

      // user has left the canvas, so clear the drag flag

      //isDragging=false;

    }



    function handleMouseMove(e){

      canMouseX=parseInt(e.clientX-offsetX);

      canMouseY=parseInt(e.clientY-offsetY);

      // if the drag flag is set, clear the canvas and draw the image

      if(isDragging){

          ctx.clearRect(0,0,canvasWidth,canvasHeight);

          ctx.drawImage(img,canMouseX-128/2,canMouseY-120/2,128,120);

      }

    }



    $(#canvas).mousedown(function(e){handleMouseDown(e);});

    $(#canvas).mousemove(function(e){handleMouseMove(e);});

    $(#canvas).mouseup(function(e){handleMouseUp(e);});

    $(#canvas).mouseout(function(e){handleMouseOut(e);});



}); // end $(function(){});

</script>



</head>



<body>

    <canvas id=canvas width=400 height=300></canvas>

</body>

</html>