.fillText() in a canvas box

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?

cowboysdude

This post is deleted!

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

FlatPepsi

@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.

Cato

@FlatPepsi remember is fillText with a small f … 😉

FlatPepsi

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