1 Reply · Latest reply on Oct 12, 2017 5:59 PM by Chris Burks

    Canvas not working on widget

      trying to use canvas on widget but facing problem

       

      HTML Template:

       

      <div>

      <canvas style="border:1px solid #000000;" id="myCanvas" width="200" height="100"></canvas>

      </div>

       

      Link Function:

       

      function myCanvas(scope, element) {

       

      var color="#FF0000";

       

      var canvas = $(element).find("myCanvas");

      var ctx = canvas.getContext("2d");

      ctx.fillStyle = color;

      ctx.fillRect(0,0,150,75);

      ctx.fill();

       

      }

        • Re: Canvas not working on widget
          Chris Burks

          Using $(element).find("<selector>") is the same as doing jQuery's $('<selector>'). In your example "myCanvas" is an id attribute thus the syntax should be this:

           

          $(element).find("#myCanvas")  // note the hashtag designating to look for an id

           

          and to get the actual getContext method use bracket notation to get to the element.

           

          var canvas = $(element).find("#myCanvas")[0];

          var ctx = canvas.getContext("2d");

          ...

           

          or

           

          var canvas = $(element).find("#myCanvas");

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

          ...