HTML5 Canvas Fade in and fade out text, not working

Question

I am trying to mess around with the html5 canvas and fading in and out text. When I am making this it never keeps the rest of the stuff on the canvas visible. The text I want to fade in and out works but nothing else shows up. I thought I could use a ctx.save() and ctx.restore() to solve this, but to no avail I am clueless.

Here is the code I am using.

Any code snippets I could work out, or pointing to where I am making my mistake would be helpful.

GameAlchemist · Accepted Answer

A few issues in your code :
• First, re-use code to improve readability / reduce bugs / ...
• Use camel casing.
• Ensure any image is loaded before launching your application.

Then you have to know the canvas has no kind of 'memory' of what you draw. So if you clearRect a canvas, you have to draw everything again.
Don't get confused by save/restore : they are here to save/restore the drawing context, meaning the various color, lineWidth, transform, font, ... settings that the context has, not its actual (pixel) content.

The following code shows how you could organize your code to get the result you want.

var canvas, ctx, step = 50,
  steps = 255;
var delay = 10;
var rgbstep = 50;

var img = new Image();
img.src = 'https://i.sstatic.net/Eisr7.png';
img.onload = init;

var fonts = ['Trebuchet MS', 'Tahoma'];

function init() {
  canvas = document.getElementById("myCanvas");
  ctx = canvas.getContext("2d");
  textFadeUp();
}

function drawFire() {
  drawText('F', 350, 195, "#8DC63F", 0, 160, 'Bold');
  drawText('IRE', 469, 195, "#8DC63F", 0, 120, 'Bold');
}

function drawFly() {
  drawText('F', 705, 195, "#A7A9AC", 0, 160, 'Bold');
  drawText('ly', 825, 195, "#A7A9AC", 0, 120, 'Bold');
}

function drawImage() {
  ctx.drawImage(img, 100, 100);
}

function clearCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
}

function drawScene() {
  clearCanvas();

  drawImage();

  drawFire();
  drawFly();

  drawText('innovative technologies', 379, 255, getGray(rgbstep), 1, 43);

}

function textFadeUp() {
  rgbstep++;

  drawScene();

  if (rgbstep < 255) {
    var t = setTimeout(textFadeUp, delay);
  }
  if (rgbstep == 255) {
    textFadeDown();
  }
}

function textFadeDown() {
  rgbstep = rgbstep - 1;

  drawScene();

  if (rgbstep > 80) {
    var t = setTimeout(textFadeDown, delay);
  }
  if (rgbstep == 80) {
    textFadeUp();
  }
}

// --------------------------------------

function drawText(txt, x, y, color, whichFont, fontSize, fontStrength) {
  fontStrength = fontStrength || '';
  ctx.font = fontStrength + ' ' + fontSize + 'pt ' + fonts[whichFont];
  ctx.fillStyle = color;
  ctx.fillText(txt, x, y);
}

function getGray(grayLevel) {
  return "rgb(" + grayLevel + "," + grayLevel + "," + grayLevel + ")"
}

Notice that if you're not afraid by math/sin, you can simplify your code by using a simple oscillator function :

function osc(min, max, freq ) {
    return min + 0.5*(max-min)*(1 + Math.sin(2*Math.PI*freq*Date.now()/1000));
}

var canvas, ctx;

var img = new Image();
img.src = 'https://i.sstatic.net/Eisr7.png';
img.onload = init;

var fonts = ['Trebuchet MS', 'Tahoma'];

function init() {
  canvas = document.getElementById("myCanvas");
  ctx = canvas.getContext("2d");
  setInterval(drawScene, 20);
}

function drawFire() {
  drawText('F', 350, 195, "#8DC63F", 0, 160, 'Bold');
  drawText('IRE', 469, 195, "#8DC63F", 0, 120, 'Bold');
}

function drawFly() {
  drawText('F', 705, 195, "#A7A9AC", 0, 160, 'Bold');
  drawText('ly', 825, 195, "#A7A9AC", 0, 120, 'Bold');
}

function draw_inn_tech() {
  var rgbStep = Math.floor(osc(80, 255, 0.5));
  drawText('innovative technologies', 379, 255, getGray(rgbStep), 1, 43);
}

function drawImage() {
  ctx.drawImage(img, 100, 100);
}

function clearCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
}

function drawScene() {
  clearCanvas();
  drawImage();
  drawFire();
  drawFly();
  draw_inn_tech();
}

// --------------------------------------

function drawText(txt, x, y, color, whichFont, fontSize, fontStrength) {
  fontStrength = fontStrength || '';
  ctx.font = fontStrength + ' ' + fontSize + 'pt ' + fonts[whichFont];
  ctx.fillStyle = color;
  ctx.fillText(txt, x, y);
}

function getGray(grayLevel) {
  return "rgb(" + grayLevel + "," + grayLevel + "," + grayLevel + ")"
}

function osc(min, max, freq) {
  return min + 0.5 * (max - min) * (1 + Math.sin(2 * Math.PI * freq * Date.now() / 1000));
}

HTML5 Canvas Fade in and fade out text, not working

Answers (1)

Related Questions