Canvas Path2d внутренняя тень

Question

Я создаю svg, и я хочу конвертировать SVG в холст. я сделать следующее:

var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 
var p = new Path2D("M10 10 h 80 v 80 h -80 Z"); 
ctx.fillStyle = '#cb1a2f'; 
ctx.shadowColor = "rgba(0, 0, 0, 0.5)"; 
ctx.shadowBlur = 24; 
ctx.fill(p); 

Но я хочу, чтобы сделать тень внутри квадрата. У меня совершенно другая фигура SVG. этот SVG является просто примером.

Answer 1

Тени как внутри, так и снаружи формы в холст API:

var canvas = document.querySelector("canvas"); 
 
var ctx = canvas.getContext("2d"); 
 
ctx.strokeStyle = 'white'; 
 
ctx.shadowColor = "black"; 
 
ctx.shadowBlur = 10; 
 
ctx.strokeRect(20,20,50,50);

<canvas></canvas>

Но заливки и обводки отображаются на верхней части этой тени.

Итак, что вы можете сделать, это сначала заполнить вашу форму, а затем установить значение globalCompositeOperation объекта контекста, чтобы новые чертежи сохранялись только там, где мы уже что-то нарисовали, и, наконец, назовем штрих вашего пути.

var canvas = document.querySelector("canvas"); 
 
var ctx = canvas.getContext("2d"); 
 
var p = new Path2D("M10 10 h 80 v 80 h -80 Z"); 
 
ctx.fillStyle = ctx.strokeStyle = 'red'; 
 
// fill a first time 
 
ctx.fill(p); 
 
// change the gCO 
 
ctx.globalCompositeOperation = "source-atop"; 
 
ctx.shadowColor = "green"; 
 
ctx.shadowBlur = 14; 
 
// now stroke to get the inner shadow 
 
ctx.stroke(p); 
 

 
// reset the gCO to its default 
 
ctx.globalCompositeOperation = "source-over";

<canvas></canvas>