JavaScript Canvas領域Clearで画像を削除する場合の処理方法(z-index)

https://velog.io/@mirryung 9023/JavaScript Canvas-Imageエリア指定のDrag-Dop
↑上記の記事に接続し、画像上でDnDで特定領域を指定した後
領域をキャンセルまたは再描画するには、削除する必要がある場合があります.
clearRect()関数のみで消去すると、特定の領域の画像が消去されます.
今日はz-indexプロパティで複数のレイヤーCanvasを使用してみます.

CSS

.dndFocus {
  position:fixed;
  border:1px solid red;
  background-color:rgb(128, 0, 0, 0.4);
  z-index:3;
}

#panel { position: relative; }
canvas { position: absolute; }

Z-indexプロパティに最大値を与え、マウスがCanvas上に描画した領域を表します.
Canvasより小さい値を指定すると、パワーポイント<後退>のように領域は表示されません.
また、z-indexプロパティを使用するには、positionプロパティを一緒に追加する必要があります.

HTML

<img src="/mouse.png" id="mouse" onclick="clickMouse();" style="float:left; width: 40px; height: 40px; cursor: pointer;">
<div id="panel" width="800px;" height="1000px;">
	<canvas name="background-image" id="background-image" width="800px;" height="1000px;" style="z-index:1;"></canvas>
	<canvas name="image" id="image" width="800px;" height="1000px;" style="z-index:2;"></canvas>
</div>
<div class="dndFocus"></div>

バックグラウンド画像(background-image)と実行機能の画像(image)キャンバスが2つ必要です.
背景画像z-indexの属性値が最も低く,レイヤが最下位と考えられる.

jQueryライブラリ

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Canvas背景画像の追加

	$(document).ready(function() {
		
		// Canvas Draw
		var canvas = document.getElementById("background-image");
   		var ctx = canvas.getContext('2d');
		var imgInv = '/invoice.jpg';

		addCanvas(ctx, imgInv, 0, 0);

		// 캔버스 이미지 추가
		function addCanvas(ctx, image, x, y) {
		  var img = new Image;
		  img.src = image;
		  img.onload = function() {
		    ctx.drawImage(img, x, y);
		  };
		};	
	});

マウスクリック時のイベント動作

function clickMouse() {
		
	    var mode = false;
	    var startX = 0;
	    var startY = 0;
	    var left, top, width, height;
	    var $dndFocus = $(".dndFocus");
	    var tx, ty = 0;
	
	    $("#image").on({
	    	 mousedown : function(e) { // 이미지 클릭 시 이벤트 발생
	    		e.preventDefault();
		        mode = true;
		        startX = e.offsetX;
			startY = e.offsetY;
                
		        tx = e.clientX - startX;
		        ty = e.clientY - startY - 3; 
		        width = height = 0;
                
		        $dndFocus.show();    
		    },
		mouseup : function(e) { // 클릭하고 있었던 마우스 버튼을 떼었을 때,
	   		mode = false;
		     
		        $dndFocus.hide(); // 포커싱 영역 숨김 처리
		        $dndFocus.css("width", 0);
		        $dndFocus.css('height', 0);
		       	var canvas = document.getElementById("image");
		       	var ctx = canvas.getContext('2d');
		       	
               		// 지정한 영역 그리기
		       	draw(left, top, (left + width), (top + height));
		        	
		        $('#image').unbind(); // 이벤트 해제
	   		},
	    	mousemove : function(e) { // 해당 이미지 위에서 마우스를 움직일 때,
	    		e.preventDefault();
	    		
		        if (!mode) { return false; }
		        
		        var x = e.offsetX;
			var y = e.offsetY;
		           
		        // 마우스 움직임에 따라 선택 영역 리사이징
		        width = Math.max(x - startX, startX - x);
		        left = Math.min(startX, x);
		        
		        $dndFocus.css('left', left+tx);
		        $dndFocus.css("width", width);
		        
		        height = Math.max(y - startY, startY - y);
		        top = Math.min(startY, y);
		       
		        $dndFocus.css('top', top+ty);
		        $dndFocus.css('height', height);
		        return false;
	    	}});
	    
	    return false;
}

特定の領域を削除

var canvas = document.getElementById("image");
var ctx = canvas.getContext('2d');
ctx.clearRect(2, 68, 44, 90); // 값 임의 지정

結果


まず背景画像を追加し,上の画像Canvasを用いてDnD領域を実現する.
clearRect()を使用すると、バックグラウンドが一定に保たれ、特定の領域のみが削除されます.