경로 외부를 어떻게 채울 수 있습니까?

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); 

라인 사이에 두 줄을 넣어 : (@ Chirag64 말한대로)

ctx.lineWidth = 1; 

및

ctx.fillStyle = '#bfbfbf'; 

Answer 2

난 당신이 그렇지 않으면 기존의 편지를 시작한다고 가정, 당신은 할 수 빨간색 직사각형을 먼저 그린 다음 그 위에 문자를 그립니다).

캔버스 합성을 사용하여 기존 콘텐츠를 "뒤에서"그릴 수 있습니다.

데모 :

http://jsfiddle.net/m1erickson/695dY/

는 특히, destination-over 합성 모드 (기존 내용이 투명이고 새로운 콘텐츠 만 그려집니다) 기존 내용 뒤에 새로운 내용 을 그릴 것입니다.

// 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 
}