캔버스. AngularJS. 텍스트 및 이미지 추가

Question

캔버스에 이미지를 추가 한 다음 이미지 상단에 텍스트를 추가하려고합니다. 텍스트는 텍스트 입력에 바인드됩니다. 문제는 내가 필드를 다시 그리는 대신 텍스트를 입력 할 때 자체 복제한다는 것입니다.

내 지시어 :

.directive('memeimage', function() { 
     return { 
     restrict: 'A', 
     link: function (scope, el, attrs) { 

      scope.upperText = ""; 
      scope.fontsize = 50; 

      scope.drawCanvas = function() { 

      var canvas = el[0]; 
      var context = canvas.getContext("2d"); 

      context.font = scope.fontsize + "px Impact"; 
      context.fillStyle = 'white'; 
      context.strokeStyle = 'black'; 
      var x = canvas.width/2; 
      var y = canvas.height/6; 
      context.textAlign = 'center'; 
      context.fillText(scope.upperText.toUpperCase(), x, y); 
      context.lineWidth = 2; 
      context.strokeText(scope.upperText.toUpperCase(), x, y); 


      }; 
     } 
     } 
    }); 

여기 바이올린 : http://jsfiddle.net/HB7LU/5085/

어떻게 이런 일을 피하기 위해 텍스트를 복제하지? 동일한 캔버스에서 이미지를 사용하기 때문에 캔버스를 지우는 것은 불가능합니다.

감사합니다.

Answer 1

쉬운 대답은 여러 개의 겹치는 캔버스 요소를 사용한다는 것입니다. 그러면 텍스트를 지우고 이미지를 그대로 유지할 수 있습니다.

당신이 이미지에 수출 할 준비가되면, 당신은 하나의 이미지에 여러 개의 캔버스를 그릴 아래에있는 솔루션을 사용할 수 있습니다

이

Save many canvas element as image

Answer 2

왜 대신 캔버스의 SVG를 사용하지를? 특히 입력 컨트롤에 바인딩하려는 경우 개별 요소를 더 잘 제어 할 수 있습니다.

Answer 3

clearRect를 사용하여 캔버스를 다시 그리거나 캔버스 너비 또는 높이를 변경해야합니다.

Fiddle

c.width = c.width