HTML5 Canvas Drawing drag and Drop - Javascript Canvas

Javascript examples for Canvas:Mouse

  1. HOME
  2. Javascript
  3. Canvas
  4. Mouse

Description

HTML5 Canvas Drawing drag and Drop

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.6.js"></script> 
      <script type="text/javascript">
    $(window).load(function(){//from  w  ww . ja  v  a  2 s. co m
var ctx = $('#cv').get(0).getContext('2d');
var circles = [
    { x:  50, y:  50, r: 25 },
    { x: 250, y:  50, r: 25 },
    { x: 250, y: 250, r: 25 },
    { x:  50, y: 250, r: 25 },
];
var mainCircle = { x: 150, y: 150, r: 44 };
function drawCircle(data) {
    ctx.beginPath();
    ctx.arc(data.x, data.y, data.r, 0, Math.PI * 2);
    ctx.fill();
}
function drawLine(from, to) {
    ctx.beginPath();
    ctx.moveTo(from.x, from.y);
    ctx.lineTo(to.x, to.y);
    ctx.stroke();
}
drawCircle(mainCircle);
$.each(circles, function() {
    drawCircle(this);
    drawLine(mainCircle, this);
});
var focused_circle, lastX, lastY ;
function test_distance( n, test_circle ){ 
    if( focused_circle ) return false;
    var dx = lastX - test_circle.x,
    dy = lastY - test_circle.y;

    if( dx * dx + dy * dy < test_circle.r * test_circle.r  ){
        focused_circle = n;
        $(document).bind( 'mousemove.move_circle' , drag_circle );
        $(document).bind( 'mouseup.move_circle' , clear_bindings);
        return false; 
    }
}
$('#cv').mousedown( function( e ){
    lastX = e.pageX - $(this).offset().left;
    lastY = e.pageY - $(this).offset().top;
    $.each( circles, test_distance );
});
function drag_circle( e ){
    var    newX = e.pageX - $('#cv').offset().left,
        newY = e.pageY - $('#cv').offset().top;

    circles[ focused_circle ].x += newX - lastX;
    circles[ focused_circle ].y += newY - lastY;

    lastX = newX, lastY = newY;

    ctx.clearRect( 0, 0, ctx.canvas.width, ctx.canvas.height );
    drawCircle(mainCircle);
    $.each(circles, function() {
        drawCircle(this);
        drawLine(mainCircle, this);
    });
}
function clear_bindings( e ){ 
    $(document).unbind( 'mousemove.move_circle mouseup.move_circle' );
    focused_circle=undefined;
}
    });

      </script> 
   </head> 
   <body> 
      <canvas width="400" height="400" id="cv"></canvas>  
   </body>
</html>

Related Tutorials