MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    .fillText() in a canvas box

    Scheduled Pinned Locked Moved Troubleshooting
    6 Posts 3 Posters 2.8k Views 3 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • FlatPepsiF Offline
      FlatPepsi
      last edited by FlatPepsi

      I’m working on a weather graph, and using a Canvas box to draw the lines. It’s based off of MMM-Forecast-io, which has a good basic precip graph.

      I’m having issues adding text labels into the graph. Trimming the code down, this is what I’m trying to do:

      var element = document.createElement('canvas');            
      var context = element.getContext('2d');
      context.font = "10px Arial";
      context.fillText("X", 10, 10 );   // problem here
      

      If I include that last line, the module breaks. What’s the right way to put text in a a Canvas box?

      Also, when I break modules doing stuff like this, how do you see an error message to get an idea of what went wrong?

      cowboysdudeC 1 Reply Last reply Reply Quote 0
      • cowboysdudeC Offline
        cowboysdude Module Developer @FlatPepsi
        last edited by cowboysdude

        This post is deleted!
        1 Reply Last reply Reply Quote 0
        • CatoC Offline
          Cato Module Developer
          last edited by Cato

          Since you’re asking how to see the error message I guess you don’t really know if that line has an error or just don’t do what you thought.

          To see errors, open your mirror in a browser and press F12 for developer tools. Look in Console tab.

          Syntax of fillText: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text

          FlatPepsiF 1 Reply Last reply Reply Quote 2
          • FlatPepsiF Offline
            FlatPepsi @Cato
            last edited by

            @Cato Thanks - that was the key to what I needed.

            My coordinates for placing the text was using a variable “TempY”, when I had earlier defined it as “tempY”. Stupid case sensitive variable names.

            tl;dr: I’m an idiot.

            Thanks for the tip, now I can see error messages, and my FillText() command is working.

            CatoC 1 Reply Last reply Reply Quote 0
            • CatoC Offline
              Cato Module Developer @FlatPepsi
              last edited by

              @FlatPepsi remember is fillText with a small f … 😉

              FlatPepsiF 1 Reply Last reply Reply Quote 0
              • FlatPepsiF Offline
                FlatPepsi @Cato
                last edited by

                @Cato [facepalm] Further proof that my heritage is from case-insensitive programming languages.

                1 Reply Last reply Reply Quote 0
                • 1 / 1
                • First post
                  Last post
                Enjoying MagicMirror? Please consider a donation!
                MagicMirror created by Michael Teeuw.
                Forum managed by Sam, technical setup by Karsten.
                This forum is using NodeBB as its core | Contributors
                Contact | Privacy Policy