p5js texts look fuzzy

jeriscc

Hi everyone,

I'm trying to display some text in the p5js canvas but no matter what I do, the texts just look very fuzzy and distorted. Taking the unrelated stuff away, here's my code for my text.

var font;
var font_bold;

function preload() {
    font = loadFont('assets/fonts/Open_Sans/OpenSans-Regular.ttf');
    font_bold = loadFont('assets/fonts/Open_Sans/OpenSans-Bold.ttf');
}

function setup() {
    createCanvas(810, 620);
    //etc...
}

function draw() {
    graph(graphPoint[0], graphPoint[1], graphHeight, graphWidth);
}

function graph(graph_x,
    graph_y,
    graph_h,
    graph_w) {

    textFont(font_bold);
    fill(textColor);
    text("AffordanceViz", 30,
    40);
    textFont(font);
    textSize(20);
    // etc...
};

I'm really stuck, help would be greatly appreciated :)

Best, -J

jeriscc

Here's what it looks like by the way.

GoToLoop

http://p5js.org/reference/#/p5/background