Can't draw text on html5 canvas

Question

I'm just starting out JS with some previous programming knowledge from other languages. I've been trying to learn more JS by making a canvas that can render text.

https://jsfiddle.net/b5n2rypn/

The problem: The code above calls fillText but no text is rendered. It was working before I created the class RichText and started trying to draw using its methods. Didn't find any errors on console and I can't seem figure out what the issue is.

What is wrong with the code?

Answer 1

this.DOMText.style.width returns string not integer (eg. "128px") and then if you multiply it by ratio it will return NaN which is probably converted to 0. you would need to parseInt on w and h in your createCanvas function because now your canvases are 0x0 dimensions.

function createCanvas(w, h, ratio) {
        w = parseInt(w);
        h = parseInt(h);

        ...