How do I only style a fillText on Canvas?

Asked

Viewed 62 times

0

I’m implementing a system that manages a file. gif with the client’s email signature, with the properties: name, sector, phone, extension and email. The only problem so far is styling each property separately. The name property has a different font size and sector property for example. What tips do you give me to style each property? Thank you in advance !

index.html

    var form = $('#oi');

        var nome = form.find('input[name="nome"]').val();

        $(document).ready(function(){
          var canvas = $("#myCanvas")[0];
          var context = canvas.getContext("2d");
          var imageObj = new Image();
          imageObj.onload = function(){
             context.drawImage(imageObj, 10, 10);
             context.font = "20px Arial bold";
             context.fillStyle = '#006400';
             imageObj.setAttribute('crossOrigin', 'anonymous');
             context.fillText(nome, 243, 65);
             context.fillText("Estagiário de Desenvolvimento", 243, 85);
             context.fillText("(85) 000-000", 240, 125);
             context.fillText("|", 380, 125);
             context.fillText("Ramal", 390,125 );
             context.fillText("[email protected]", 243, 145);

         };
         imageObj.src = "ASSINATURA-BG.png"; 
        });
javascript jquery canvas

  • You want answer in Jquery or pure Javascript?

  • Can be in jquery !

  • Do you want clean and functional code? It leaves style for each one.

1 answer

0

Eae, beauty?

Well, you can create a clean render function and call it by passing the styles you want

To complement, create an object with the fonts Styles and just call them for each category (name, sector, etc)

Browser other questions tagged javascript jquery canvas

You are not signed in. Login or sign up in order to post.