CODEWITHSUNDEEP
javascriptfont-awesome
Nuzzob
Nuzzob

Reputation: 411

Display Font Awesome characters on a canvas

I just found this codepen and I wondered if I could reuse this code by replacing the stars particles with random characters from the font-awesome font.

I just know that's here that he draws the stars :

Draw: function() {
context.strokeStyle = this.color;
context.fillStyle = this.color;
context.save();
context.beginPath();
context.translate(this.x, this.y);
context.moveTo(0, -this.diameter);

for (var i = 0; i < 7; i++)
{
  context.rotate(Math.PI / 7);
  context.lineTo(0, -(this.diameter / 2));
  context.rotate(Math.PI / 7);
  context.lineTo(0, -this.diameter);
}

if(this.id % 2 == 0) {
  context.stroke();
} else {
  context.fill();
}

context.closePath();
context.restore();
  }

Any ideas of how I could achieve that ?

Upvotes: 0

Views: 253

Answers (1)

wvdz
wvdz

Reputation: 16651

That's actually easier than what he did. He uses a canvas, so can use the canvas.fillText() method to draw text on it.

Replace the draw function with this, to only draw automobiles.

  Draw: function() {
    context.font = "30px FontAwesome";
    context.fillStyle = this.color;
    context.strokeStyle = this.color;
    if(this.id % 2 == 0) {
      context.fillText('\uf1b9',this.x, this.y);
    } else {
      context.strokeText('\uf1b9',this.x, this.y);
    }
  }

Upvotes: 2

Related Questions