HTML5 - Canvas

[Giihh 6]

Olá,

 

Estou aprendendo sobre como usar o canvas do HTML5 para criar uma imagem e salvar em um diretório:

 

Tem que ter um texto e cor de fundo, a minha primeira dificuldade era descobrir como fazer para o texto quebrar a linha automaticamente e não sair da imagem.. isso já foi resolvido.

 

Estou tentando colocar background na imagem não na tag canvas e sim na imagem gerada, mas ainda não consegui e também preciso aprender como fazer para nomear a imagem e salvar em um diretório definido.

  <canvas id="aquiOID" width="300" height="170" ></canvas>

    <script>
      function wrapText(context, text, x, y, maxWidth, lineHeight) {
        var words = text.split(' ');
        var line = '';

        for(var n = 0; n < words.length; n++) {
          var testLine = line + words[n] + ' ';
          var metrics = context.measureText(testLine);
          var testWidth = metrics.width;
          if (testWidth > maxWidth && n > 0) {
            context.fillText(line, x, y);
            line = words[n] + ' ';
            y += lineHeight;
          }
          else {
            line = testLine;
          }
        }
        context.fillText(line, x, y);
      }
      

      var canvas = document.getElementById('aquiOID');
	  var context = canvas.getContext('2d');
      var maxWidth = 300;
      var lineHeight = 65;
      var x = (canvas.width - maxWidth) / 2;
      var y = 60;
      var text = 'Texto que será impresso';

      context.font = '35pt verdana';
      context.fillStyle = '#fff';
  

      wrapText(context, text, x, y, maxWidth, lineHeight);

    </script>

Agradeço ajuda