very simple question -- using canvas and javascript

I have looked at the documentation and haven't found an answer.

How do I implement javascript into an html component?

Let's make it simple. Let's pretend I put in an HTML component with this code:

Now how do I implement this javascript to fill that canvas?

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(20,20,150,100);

This should be really, really easy. Yet I am having a tough time.

I have looked at the following and they don't help, so don't point me to these places:

https://docs.appery.io/docs/appbuilde...

https://blog.appery.io/2016/02/develo...

-- Thank you!
1 person has
this question
+1
Reply
  • This code can be placed in a separate JavaScript file or directly inside Run JavaScript action. You need to make sure that the selector in the first line works correctly. The actual HTML source has many components so you need to carefully select the element you want to work on.
    • view 4 more comments
    • I checked the outline tab:

      the page component is called apage

      the html component is called htmlcanvas

      this doesn't work:
      var c=document.getElementById("apage.htmlcanvas.myCanvas");
      var ctx=c.getContext("2d");
      ctx.fillStyle="#FF0000";
      ctx.fillRect(20,20,150,100);

      this doesn't work:
      var c=document.getElementById("htmlcanvas.myCanvas");
      var ctx=c.getContext("2d");
      ctx.fillStyle="#FF0000";
      ctx.fillRect(20,20,150,100);

      this doesn't work:

      var c=document.apage.htmlcanvas.getElementById("myCanvas");
      var ctx=c.getContext("2d");
      ctx.fillStyle="#FF0000";
      ctx.fillRect(20,20,150,100);

      this doesn't work:

      var c=apage.htmlcanvas.document.getElementById("myCanvas");
      var ctx=c.getContext("2d");
      ctx.fillStyle="#FF0000";
      ctx.fillRect(20,20,150,100);

      note that I am inserting the above code through the scope tab. I have tried both the scope function type and the function type.

      note that I am using ng-bind in all cases.

      Thank you for your help.
    • Hello Iceman,

      Please look at your another topic with that issue: https://getsatisfaction.com/apperyio/...
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. indifferent, undecided, unconcerned kidding, amused, unsure, silly sad, anxious, confused, frustrated happy, confident, thankful, excited