var canvas=document.getElementById("canvas"); image = new Image(); image.src = 'https://d13yacurqjgara.cloudfront.net/users/4094/screenshots/2846992/drib106_1x.jpg'; image.onload = function() { ctx.drawImage(image, 0, 0); $(canvas).css('background-image', 'url(https://d13yacurqjgara.cloudfront.net/users/413551/screenshots/2846695/06_img_dribbble_2_2_1x.jpg)'); }; var ctx=canvas.getContext("2d"); var lastX; var lastY; var strokeColor="red"; var strokeWidth=5; var mouseX; var mouseY; var canvasOffset=$("#canvas").offset(); var offsetX=canvasOffset.left; var offsetY=canvasOffset.top; var isMouseDown=false; function handleMouseDown(e){ mouseX=parseInt(e.clientX-offsetX); mouseY=parseInt(e.clientY-offsetY); // Put your mousedown stuff here lastX=mouseX; lastY=mouseY; isMouseDown=true; } function handleMouseUp(e){ mouseX=parseInt(e.clientX-offsetX); mouseY=parseInt(e.clientY-offsetY); // Put your mouseup stuff here isMouseDown=false; } function handleMouseOut(e){ mouseX=parseInt(e.clientX-offsetX); mouseY=parseInt(e.clientY-offsetY); // Put your mouseOut stuff here isMouseDown=false; } function handleMouseMove(e){ mouseX=parseInt(e.clientX-offsetX); mouseY=parseInt(e.clientY-offsetY); // Put your mousemove stuff here if(isMouseDown){ ctx.beginPath(); ctx.globalCompositeOperation="destination-out"; ctx.arc(lastX,lastY,8,0,Math.PI*2,false); ctx.fill(); lastX=mouseX; lastY=mouseY; } } $("#canvas").mousedown(function(e){handleMouseDown(e);}); $("#canvas").mousemove(function(e){handleMouseMove(e);}); $("#canvas").mouseup(function(e){handleMouseUp(e);}); $("#canvas").mouseout(function(e){handleMouseOut(e);}); var mode="pen"; $("#pen").click(function(){ mode="pen"; }); $("#eraser").click(function(){ mode="eraser"; }); 
 #canvas:hover { cursor: pointer; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <canvas id="canvas" width="300" height="300"></canvas>

I already have a ready canvas and a function for cleaning the image and showing the bottom layer of the image.
Just help me change the shape of the cleaning area of ​​the cursor (now it is round) to an arbitrary (if possible).
enter image description here
And so that on cell phones (on the sensor) it worked (with a double press or with a long press), but now on the sensors only scrolling takes place instead of cleaning.

  • the circle is drawn by calling ctx.arc(lastX,lastY,8,0,Math.PI*2,false); - instead of it, you can draw any shape and also fill it up - Grundy
  • @Grundy I don’t know how, by copying my code, change my shape to a smooth-edged rectangle for example? - Shuhratjon Jumaev
  • I do not know what it is with the figure and how you got it :) - Grundy
  • @Grundy is not necessarily the same as in the picture, I just drew it for example. You can just make a smooth-edged rectangle - Shuhratjon Jumaev
  • what does it mean with smooth edges ? - Grundy

1 answer 1

A little searching on the Internet for drawing, he decided his own question. If anyone needs it, the solutions are in this code. It also works on the sensor.

 var canvas=document.getElementById("canvas"); image = new Image(); image.src = 'https://d13yacurqjgara.cloudfront.net/users/4094/screenshots/2846992/drib106_1x.jpg'; image.onload = function() { ctx.drawImage(image, 0, 0); //ctx.drawImage(image, 20, 39, 170, 140, 13, 15, 171, 142); $(canvas).css('background-image', 'url(https://d13yacurqjgara.cloudfront.net/users/413551/screenshots/2846695/06_img_dribbble_2_2_1x.jpg)'); }; var ctx=canvas.getContext("2d"); var lastX; var lastY; var strokeColor="red"; var strokeWidth=5; var mouseX; var mouseY; var canvasOffset=$("#canvas").offset(); var offsetX=canvasOffset.left; var offsetY=canvasOffset.top; var isMouseDown=false; var objW = 60; var objH = 30; var objR = 15; function roundedRect(ctx,x,y,width,height,radius){ ctx.beginPath(); ctx.globalCompositeOperation="destination-out"; ctx.moveTo(x,y+radius); ctx.lineTo(x,y+height-radius); ctx.quadraticCurveTo(x,y+height,x+radius,y+height); ctx.lineTo(x+width-radius,y+height); ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius); ctx.lineTo(x+width,y+radius); ctx.quadraticCurveTo(x+width,y,x+width-radius,y); ctx.lineTo(x+radius,y); ctx.quadraticCurveTo(x,y,x,y+radius); ctx.stroke(); ctx.fill(); } function handleMouseDown(e){ mouseX=parseInt(e.clientX-offsetX); mouseY=parseInt(e.clientY-offsetY); // Put your mousedown stuff here lastX=mouseX; lastY=mouseY; roundedRect(ctx,lastX,lastY,objW,objH,objR); isMouseDown=true; } function handleMouseUp(e){ mouseX=parseInt(e.clientX-offsetX); mouseY=parseInt(e.clientY-offsetY); // Put your mouseup stuff here isMouseDown=false; } function handleMouseOut(e){ mouseX=parseInt(e.clientX-offsetX); mouseY=parseInt(e.clientY-offsetY); // Put your mouseOut stuff here isMouseDown=false; } function handleMouseMove(e){ mouseX=parseInt(e.clientX-offsetX); mouseY=parseInt(e.clientY-offsetY); // Put your mousemove stuff here if(isMouseDown){ roundedRect(ctx,lastX,lastY,objW,objH,objR); //ctx.arc(lastX,lastY,8,0,Math.PI*2,false); lastX=mouseX; lastY=mouseY; } } canvas.addEventListener("touchstart", function (e) { mousePos = getTouchPos(canvas, e); var touch = e.touches[0]; var mouseEvent = new MouseEvent("mousedown", { clientX: touch.clientX - (objW / 2), clientY: touch.clientY - (objH / 2) }); canvas.dispatchEvent(mouseEvent); }, false); canvas.addEventListener("touchend", function (e) { var mouseEvent = new MouseEvent("mouseup", {}); canvas.dispatchEvent(mouseEvent); }, false); canvas.addEventListener("touchmove", function (e) { var touch = e.touches[0]; var mouseEvent = new MouseEvent("mousemove", { clientX: touch.clientX - (objW / 2), clientY: touch.clientY - (objH / 2) }); canvas.dispatchEvent(mouseEvent); }, false); // Get the position of a touch relative to the canvas function getTouchPos(canvasDom, touchEvent) { var rect = canvasDom.getBoundingClientRect(); return { x: touchEvent.touches[0].clientX - rect.left, y: touchEvent.touches[0].clientY - rect.top }; } // Prevent scrolling when touching the canvas document.body.addEventListener("touchstart", function (e) { if (e.target == canvas) { e.preventDefault(); } }, false); document.body.addEventListener("touchend", function (e) { if (e.target == canvas) { e.preventDefault(); } }, false); document.body.addEventListener("touchmove", function (e) { if (e.target == canvas) { e.preventDefault(); } }, false); $("#canvas").mousedown(function(e){handleMouseDown(e);}); $("#canvas").mousemove(function(e){handleMouseMove(e);}); $("#canvas").mouseup(function(e){handleMouseUp(e);}); $("#canvas").mouseout(function(e){handleMouseOut(e);}); 
 #canvas:hover { cursor: pointer; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <canvas id="canvas" width="300" height="300"><p>К сожалению, ваш браузер не поддерживает данную функцию. Мы рекомендуем вам обновить ваш браузер или установить другой.</p></canvas><br>