ペイントアプリケーションのようにキャンバスを使用して複数の図形を描画する

Question

キャンバスを使用してアプリケーションのようなペイントを作成しようとしています。私は自由な手の道具で描くことができるが、私が形を使用しようとするとき私は正しく使用することができない明確な方法を使用する必要があります。キャンバスにマウスで複数の図形を描画する必要がありますが、そうすることはできません。上記のリンクで

<canvas width="800px" height="600px" id="drawing"></canvas>

JS

var isDown; 
var start; 
var end; 
var canvasEl = document.getElementById("drawing"); 
var draw = canvasEl.getContext("2d"); 
draw.lineWidth = "2"; 
draw.strokeStyle = "blue"; 
var lastWidth = 0; 
var lastHeight = 0; 

$("#drawing").mousedown(function(e) { 
    isDown = true; 
    start = getMousePos(canvasEl, e); 
    end = getMousePos(canvasEl, e); 
    lastWidth = 0; 
    lastHeight = 0; 
    e.preventDefault(); 
}); 

$("#drawing").mouseup(function() { 
    isDown = false; 
}); 

$("#drawing").mousemove(function(e) { 
    if (!isDown) return; 
    var end = getMousePos(canvasEl, e); 
    var h = end.y - start.y; 
    var w = end.x - start.x; 
    draw.clearRect(start.x-5, start.y-5, lastWidth + 6, lastHeight + 6); 
    draw.beginPath(); 
    draw.rect(start.x, start.y, w, h); 
    lastWidth = w; 
    lastHeight = h; 
    draw.stroke(); 
    draw.closePath(); 
}); 


function getMousePos(canvas, evt) { 
    var rect = canvas.getBoundingClientRect(); 
    return { 
     x: Math.floor(evt.clientX - rect.left), 
     y: Math.floor(evt.clientY - rect.top) 
    }; 
} 

私がしようとしたときに、複数の四角形を描画することができ：ここで

は私が http://jsfiddle.net/6vq64sdh/

HTMLをしようとしています何へのリンクですマウスの右側をドラッグしますが、左側にドラッグするとできません。あなたはどうかしてください

Answer 1

あなたのコードをちょっと改善しました。すでに存在している矩形の上に新しい矩形を描こうとすると、何か問題があるようです。

私は描画された矩形を格納する変数を作成します。 （そのようなブラウザの脳のような）そしてコードの一番下に、私はsetInterval()関数を作りました。脳の変数である長方形を再描画するのは60fpsです。

var drawed_objects = []; //our brain variable 
 
    var isDown; 
 
    var start; 
 
    var end; 
 
    var canvasEl = document.getElementById("drawing"); 
 
    var draw = canvasEl.getContext("2d"); 
 
    draw.lineWidth = "2"; 
 
    draw.strokeStyle = "blue"; 
 
    var lastWidth = 0; 
 
    var lastHeight = 0; 
 

 
    $("#drawing").mousedown(function(e) { 
 
     isDown = true; 
 
     start = getMousePos(canvasEl, e); 
 
     end = getMousePos(canvasEl, e); 
 
     lastWidth = 0; 
 
     lastHeight = 0; 
 
     e.preventDefault(); 
 
    }); 
 

 
    $("#drawing").mouseup(function() { 
 
     drawed_objects.push({start:start,width:w,height:h}); 
 
     isDown = false; 
 
    }); 
 

 
    $("#drawing").mousemove(function(e) { 
 
     if (!isDown) return; 
 
     end = getMousePos(canvasEl, e); 
 
     h = end.y - start.y; 
 
     w = end.x - start.x; 
 
     draw.clearRect(start.x-5, start.y-5, lastWidth + 6, lastHeight + 6); 
 
     draw.beginPath(); 
 
     draw.rect(start.x, start.y, w, h); 
 
     lastWidth = w; 
 
     lastHeight = h; 
 
     draw.stroke(); 
 
     draw.closePath(); 
 
    }); 
 

 
    //in here we drawing old rectangles again again again.. 
 
    //and all time clearing the canvas 
 
    setInterval(function(){ 
 
     draw.clearRect(0,0,draw.canvas.width,draw.canvas.height); 
 

 
     for(let i=0; i <drawed_objects.length; i++) 
 
     { 
 
     var obj = drawed_objects[i]; 
 
     draw.beginPath(); 
 
     draw.rect(obj.start.x, obj.start.y, obj.width, obj.height); 
 
     draw.stroke(); 
 
     draw.closePath(); 
 
     } 
 

 
    },1000/60); 
 

 
function getMousePos(canvas, evt) { 
 
     var rect = canvas.getBoundingClientRect(); 
 
     return { 
 
      x: Math.floor(evt.clientX - rect.left), 
 
      y: Math.floor(evt.clientY - rect.top) 
 
     }; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<canvas width="800px" height="600px" id="drawing"></canvas>