CODEWITHSUNDEEP
htmlcsshtml5-canvas
Banana Bamboo
Banana Bamboo

Reputation: 89

How to add text to responsive background canvas to a webpage?

I want to create a Welcome Page with a responsive background like this fiddle
https://codepen.io/JulianLaval/pen/KpLXOO/.
I tried using

var ctx = canvasDiv.getContext("2d");
ctx.fillStyle = "RGBA(255, 255, 255, 0.8)";
ctx.fillText("Hi", canvasDiv.width / 2, canvasDiv.height / 2);

But it is not working. Any help?

Upvotes: 0

Views: 104

Answers (1)

obscure
obscure

Reputation: 12891

The problem is that you can not simply reuse the canvas of the particle library - at least not without modifications to the particle library itself.

This library has it's own update() function which we can see at this github link: ParticleNetwork.prototype.update

So initially it clears it's canvas, draws the particles and finally schedules a call to itself - so it constantly repaints the canvas with the displays refresh rate. No here's the problem - if you simply draw something to it's canvas it will ultimately be overwritten by this update function.

If you want to draw text on it's canvas, you have to do it inside this function.

For example, find these lines of code:

  if (this.options.velocity !== 0) {
      requestAnimationFrame(this.update.bind(this));
    }

if you add the following lines before:

this.ctx.fillStyle = "RGBA(255, 255, 255, 0.8)";
this.ctx.fillText("Hi", this.canvas.width / 2, this.canvas.height / 2);

You will have your desired text.

Upvotes: 1

Related Questions