Display Font Awesome characters on a canvas

Question

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 ?

wvdz · Accepted Answer · 2016-03-19T11:56:22.537

2

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);
    }
  }

edited Mar 19 '16 at 11:56

answered Mar 19 '16 at 11:48

wvdz

16,251
4
53
90

Hell yeah, that works like a charm ! Any ideas of how could I take random characters from the font, based on its code ? – Nuzzob Mar 19 '16 at 12:01
Found it ! Could you explain how I can do to rotate the font characters at the same time they translate in the Update() method ? – Nuzzob Mar 20 '16 at 00:36
First figure out what the unicode range of fontawesome is. Then you can use `Math.floor(Math.random() * n)) + c` to get a random unicode value. Unfortunately, there doesn't seem to be a trivial way to convert this to actual Unicode in Javascript. However, this answer looks promising: http://stackoverflow.com/a/9109467/2947592 – wvdz Mar 20 '16 at 00:39
I ended up choosing one hundred of them and I put them in an array in which I take randomly when creating the dot. Any idea for the rotation ? – Nuzzob Mar 20 '16 at 00:46
Okay, I see what your problem is. I think you should introduce a new attribute on Dot: lastModified, and set it to the current timestamp when you update it. Then check before updating the icon if it was updated more than a second ago. – wvdz Mar 20 '16 at 00:49
I think there is a misunderstood. I try to use context.rotate() in order to rotate each character on its centerpoint while it move. Sorry if I was not very clear .. – Nuzzob Mar 20 '16 at 01:02
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/106821/discussion-between-wvdz-and-nuzzob). – wvdz Mar 20 '16 at 01:04

Display Font Awesome characters on a canvas

1 Answers1