我怎样才能填写路径的外部？

Question

我可以使用路径绘制这些字母。但我想要做的是使用该路径并填写红色图像显示的内容，而不是填写字母。

以下是我正在使用的代码：

function mattes_draw_letter(x, y, width, height, letter, position)
{
  var canvas = document.createElement('canvas');
  canvas.style.position = "absolute";
  canvas.style.top = y + "px";
  canvas.id = "canvas_opening_" + position;
  canvas.style.zIndex = 5;
  canvas.width = width;
  canvas.height = height;
  canvas.style.left = x + "px";
  var ctx = canvas.getContext("2d");
  ctx.lineWidth = 1;
  ctx.fillStyle = '#bfbfbf';
  ctx.strokeStyle = '#000000';
  ctx.beginPath();
  ctx.moveTo(letter[0] * width, letter[1] * height);
  for (i = 0; i < letter.length; i+=2)
  {
    if (typeof letter[i+3] !== 'undefined')
    {
      ctx.lineTo(letter[i+2] * width, letter[i+3] * height);
    }
  }
  ctx.fill();
  ctx.stroke();
  ctx.closePath();


  $("#mattes").append(canvas);

  canvas.addEventListener("drop", function(event) {drop(event, this);}, false); 
  canvas.addEventListener("dragover", function(event) {allowDrop(event);}, false); 
  canvas.addEventListener("click", function() {photos_add_selected_fid(this);}, false);
}

这就是我目前所拥有的：

这就是我想要的：

Answer 1

在用灰色绘制字母之前，只需用红色填充框。 我能够通过在代码中添加两行代码来实现此目的。

ctx.fillStyle = "#F00";
ctx.fillRect(0, 0, width, height);

将这两行放在行之间：

ctx.lineWidth = 1;

和

ctx.fillStyle = '#bfbfbf';

Answer 2

我假设您已经开始使用现有的字母（如@ Chirag64所说），您可以先绘制红色矩形，然后在上面绘制字母。

你可以使用画布合成来＆＃34;画后面＆＃34;现有内容。

演示：http://jsfiddle.net/m1erickson/695dY/

特别是destination-over合成模式会在现有内容后面绘制新内容（仅在现有内容透明的情况下绘制新内容）。

context.globalCompositeOperation="destination-over";

假设HOPE字符是在透明背景上绘制的，您可以在HOPE字符后面添加红色矩形，如下所示：

// draw red rectangles **behind** the letters using compositing

ctx.fillStyle="red";

ctx.globalCompositeOperation="destination-over";

for(var i=0;i<4;i++){
    ctx.fillRect(i*62+16,13,50,88);  // your x,y,width,height depend on your artwork
}