Canvas. AngularJS. Adding text and image

Question

I'm adding image to canvas and then trying to add text on the top of the image. Text is binded to text input. The problem is that when I type text in the field, instead of redrawing, it's duplicate itself.

My directive:

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


          };
        }
      }
    });

Here's fiddle: http://jsfiddle.net/HB7LU/5085/

How to avoid this and to not duplicate text? Clearing canvas isn't way to go, because I'have also using image on same canvas.

Thanks

Overlap multiple canvas elements? One for text and one for images? That way you can clear the text and the image remains. — Justin Niessner, Jul 21 '14 at 19:50
Can I convert resulting canvases into one png image after that ? — Fyodor Khruschov, Jul 21 '14 at 19:57

score 0 · Answer 1 · edited May 23 '17 at 12:08

0

The easy answer is that you use multiple overlapping canvas elements. That will give you the freedom to clear the text and still keep the image(s) underneath.

When you're ready to export to an image, you can use the solution found below to draw your multiple canvases to a single image:

Save many canvas element as image

edited May 23 '17 at 12:08

Community

1
1

answered Jul 21 '14 at 20:09

Justin Niessner

242,243
40
408
536

I'm interesting, how guys can do this without multiple canvases? http://mobiforge.com/design-development/html5-canvas-meme-generator – Fyodor Khruschov Jul 22 '14 at 00:13
@n8m - Their code is simple. They clear the canvas every time the text changes. They then transform and redraw the image along with the text. All of their source is visible in a debugger. – Justin Niessner Jul 22 '14 at 14:33

score 0 · Answer 2 · answered Jul 21 '14 at 20:18

0

Why not use SVG instead of Canvas? You'll have better control of individual elements especially since you're trying to bind to an input control.

answered Jul 21 '14 at 20:18

rchawdry

1,256
1
10
14

Dylan · Answer 3 · 2014-07-21T21:13:21.600

0

You have to redraw the canvas with clearRect or change the canvas width or height.

Fiddle

c.width = c.width

edited Jul 21 '14 at 21:13

answered Jul 21 '14 at 21:00

Dylan

4,703
1
20
23

this will delete another stuff on the canvas including the image which I mentioned – Fyodor Khruschov Jul 21 '14 at 23:36
Well you either 1) Redraw the whole canvas every update including your images 2) Maintain multiple layered canvas' 3) switch to svg where you can manage individual elements. – Dylan Jul 22 '14 at 03:06

Canvas. AngularJS. Adding text and image

3 Answers3