HTML5 - Canvas, нарисуйте прямоугольник с помощью DIV

Question

Я сделал этот пример, чтобы показать, что моя проблема: http://jsfiddle.net/GSRgf/

HTML

<canvas id="canvas" width="500" height="500"></canvas> 
<div id="div"></div> 

JS

$(function() { 
var ctx=$('#canvas')[0].getContext('2d'); 
rect = {}; 
drag = false; 

$(document).on('mousedown','#canvas',function(e){ 
    rect.startX = e.pageX - $(this).offset().left; 
    rect.startY = e.pageY - $(this).offset().top; 
    rect.w=0; 
    rect.h=0; 
    drag = true; 
}); 

$(document).on('mouseup','#canvas',function(){ 
    drag = false; 
}); 

$(document).on('mousemove','#canvas',function(e){ 
    if (drag) { 
     rect.w = (e.pageX - $(this).offset().left)- rect.startX; 
     rect.h = (e.pageY - $(this).offset().top)- rect.startY; 
     ctx.clearRect(0, 0, 500, 500); 
     ctx.fillStyle = 'rgba(0,0,0,0.5)'; 
     ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h); 
    } 
});  
}); 

Как это возможно продолжайте рисовать прямоугольник, когда мышь находится над div?

Спасибо!

Answer 1

Удалить селектор «#canvas» для событий mousemove и mouseup. Измените событие mousemove на использование $ ("# canvas") вместо $ (this).

http://jsfiddle.net/GSRgf/3/

$(function() { 
    var ctx=$('#canvas')[0].getContext('2d'); 
    rect = {}; 
    drag = false; 

    $(document).on('mousedown','#canvas',function(e){ 
     rect.startX = e.pageX - $(this).offset().left; 
     rect.startY = e.pageY - $(this).offset().top; 
     rect.w=0; 
     rect.h=0; 
     drag = true; 
    }); 

    $(document).on('mouseup',function(){ 
     drag = false; 
    }); 

    $(document).on('mousemove',function(e){ 
     if (drag) { 
      rect.w = (e.pageX - $("#canvas").offset().left)- rect.startX; 
      rect.h = (e.pageY - $("#canvas").offset().top)- rect.startY; 
      ctx.clearRect(0, 0, 500, 500); 
      ctx.fillStyle = 'rgba(0,0,0,0.5)'; 
      ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h); 
     } 
    });  
});