Можно ли манипулировать HTML5 Canvas CLearRect (), чтобы он выглядел как стрелка?

Question

Я экспериментировал с canvas (новичок) и сейчас делаю несколько знаков.
Мне было интересно, можно ли манипулировать ctx.clearRect (на синем знаке "One Way"), чтобы он выглядел каксеверная стрелка?Если нет, как я могу это сделать?Я попытался поместить еще один белый квадрат внутри синего квадрата, однако он просто прячется за исходным квадратом.Спасибо.

var canvas = document.querySelector("#myCanvas");
var ctx = canvas.getContext("2d");

ctx.save();			// save previous display state
//  set drawing properties for the sign
ctx.lineWidth = 32;	       // nice wide line		
ctx.lineJoin = "round";	   // rounded corners
ctx.strokeStyle = "red";
ctx.fillStyle = "red";

// create octagon linear path
ctx.beginPath();
ctx.moveTo(200, 100);
ctx.lineTo(350, 100);
ctx.lineTo(450, 200);
ctx.lineTo(450, 350);
ctx.lineTo(350, 450);
ctx.lineTo(200, 450);
ctx.lineTo(100, 350);
ctx.lineTo(100, 200);
ctx.closePath();

// fill the sign and draw wide red lines
ctx.fill();
ctx.stroke();	

// draw narrower white lines -- these will display on top of the wide red lines and make the red lines
// look like the outside edge -- a nice trick!
ctx.strokeStyle = "white";
ctx.lineWidth = 10;
ctx.stroke();

// draw STOP text
ctx.fillStyle  = "white";
ctx.font = "bold 100px Arial";
ctx.fillText( "STOP" ,140, 310);
ctx.restore();		// restore previous display state
   
     
//  set drawing properties for the sign
ctx.lineWidth = 32;	       // nice wide line		
ctx.lineJoin = "round";	   // rounded corners
ctx.strokeStyle = "#FF0000";
ctx.fillStyle = "#FF0000";

// create new circle
ctx.beginPath();
ctx.translate(440, -20);
            
ctx.arc(300, 300, 220, 0, 2 * Math.PI);  

// fill the sign 
ctx.fill();
//used white outline to narrow the circle radius further
ctx.strokeStyle = "white";

ctx.stroke();

// draw Do Not Enter text
ctx.fillStyle  = "white";
ctx.font = "bold 50px Arial";
ctx.fillText( "Do Not" ,210, 210);
ctx.fillText( "Enter" ,230, 400);  
ctx.clearRect(180, 270, 250, 50); 
ctx.restore();		// restore display   
            
            
var canvas = document.querySelector("#myCanvas2");
var context = canvas.getContext("2d");
            
 ctx.save();	// save previous display state
//  set drawing properties for the sign
ctx.lineWidth = 25;	       		
ctx.lineJoin = "round";	   // rounded corners
ctx.strokeStyle = "#0099ff";
ctx.fillStyle = "#0099ff";

// create square linear path
ctx.beginPath();
ctx.translate(-250, 450);

ctx.moveTo(190, 100);
ctx.lineTo(350, 100);
ctx.lineTo(450, 100)  
ctx.lineTo(450,450); 
ctx.lineTo(190,450);          

ctx.closePath();
            
 
//Draw White lines
ctx.fill();
ctx.stroke();	

// draw narrower white lines -- these will display on top of the wide red lines and make the red lines
// look like the outside edge -- a nice trick!
ctx.strokeStyle = "white";
ctx.lineWidth = 10;
            
ctx.stroke();
ctx.clearRect(290, 150, 80, 250);
// draw STOP text
ctx.fillStyle  = "#0099ff";
ctx.font = "bold 60px Arial";
ctx.fillText( "ONE WAY" ,175, 550);
ctx.restore();	

<canvas id = "myCanvas" width = "1000" height = "1000" >Load Error</canvas>
   
<canvas id = "myCanvas2" width = "500" height = "500" >Load Error</canvas>
       
        
var canvas = document.querySelector("#myCanvas");
var ctx = canvas.getContext("2d");

Answer 1

Хотя другой ответ будет работать в вашем случае, есть некоторые ситуации, в которых кто-то может захотеть очистить путь, а не просто заполнить его - для этого можно использовать атрибут globalCompositionOperation :

ctx.beginPath();     
//draw path to clear here

ctx.globalCompositionOperation = "destination-out";
ctx.fill();
ctx.globalCompositionOperation = "source-over";

Это позволит браузеру очистить указанный путь на холсте вместо его заполнения.Если установить для этого атрибута значение source-over, после операции будет восстановлен режим отрисовки по умолчанию.

Answer 2

Вы можете просто нарисовать многоугольник, как в другом месте.

Заменить:

ctx.clearRect(290, 150, 80, 250);

на:

// Arrow-up shape:
ctx.beginPath();     
ctx.moveTo(320, 150);
ctx.lineTo(420, 250);
ctx.lineTo(360, 250);
ctx.lineTo(360, 400);
ctx.lineTo(280, 400); 
ctx.lineTo(280, 250);
ctx.lineTo(220, 250);
ctx.closePath();

ctx.fillStyle = "white";
ctx.stroke();
ctx.fill();