I am unable to use canvas as background

Question

I want to use one canvas as background for my <section> i saw some post like this one Use <canvas> as a CSS background and try some things but nothing work and i cant figure whats wrong. Maybe it can be done right through js.

This is my js to create canvas

/**/ /* ---- CORE ---- */
/**/var canvas = document.createElement('canvas');
    var firstblock = document.getElementById('ifb');
/**/var context = canvas.getContext('2d');
/**/var windowWidth = canvas.width = document.getElementById("ifb").offsetWidth +1;
/**/var windowHeight = canvas.height = document.getElementById("ifb").offsetHeight +1;
/**/canvas.id = 'canvas';
    firstblock.appendChild(canvas)
/**/ /* ---- CORE END ---- */
/* ---- CREATING ZONE ---- */

/* ---- SETTINGS ---- */
var numberParticlesStart = 100;
var particleSpeed = 20.3;
var velocity = 0.9;
var circleWidth = 200;

/* ---- INIT ---- */
var particles = [];

var getRandomFloat = function getRandomFloat(min, max) {
  return Math.random() * (max - min) + min;
};

/* ---- Particle ---- */
function Particle(x, y) {
  this.x = x;
  this.y = y;

  this.vel = {
    x: getRandomFloat(-20, 20) / 100,
    y: getRandomFloat(-20, 20) / 100,
    min: getRandomFloat(2, 10),
    max: getRandomFloat(10, 100) / 10
  };

  this.color = 'rgba(255, 255, 255, 0.25)';
}
Particle.prototype.render = function () {
  context.beginPath();
  context.fillStyle = this.color;
  context.arc(this.x, this.y, 1, 0, Math.PI * 2);
  context.fill();
};
Particle.prototype.update = function () {

  var forceDirection = {
    x: getRandomFloat(-1, 1),
    y: getRandomFloat(-1, 1)
  };

  if (Math.abs(this.vel.x + forceDirection.x) < this.vel.max) {
    this.vel.x += forceDirection.x;
  }
  if (Math.abs(this.vel.y + forceDirection.y) < this.vel.max) {
    this.vel.y += forceDirection.y;
  }

  this.x += this.vel.x * particleSpeed;
  this.y += this.vel.y * particleSpeed;

  if (Math.abs(this.vel.x) > this.vel.min) {
    this.vel.x *= velocity;
  }
  if (Math.abs(this.vel.y) > this.vel.min) {
    this.vel.y *= velocity;
  }

  this.testBorder();
};
Particle.prototype.testBorder = function () {
  if (this.x > windowWidth) {
    this.setPosition(this.x, 'x');
  } else if (this.x < 0) {
    this.setPosition(windowWidth, 'x');
  }
  if (this.y > windowHeight) {
    this.setPosition(this.y, 'y');
  } else if (this.y < 0) {
    this.setPosition(windowHeight, 'y');
  }
};
Particle.prototype.setPosition = function (pos, coor) {
  if (coor === 'x') {
    this.x = pos;
  } else if (coor === 'y') {
    this.y = pos;
  }
};

/* ---- Functions ----*/
function loop() {
  var i = void 0;
  var length = particles.length;
  for (i = 0; i < length; i++) {
    particles[i].update();
    particles[i].render();
  }
  requestAnimationFrame(loop);
}

/* ---- START ---- */
function init() {
  var i = void 0;
  for (i = 0; i < numberParticlesStart; i++) {
    var angle = Math.random() * 360;
    particles.push(new Particle(windowWidth * 0.5 + Math.cos(angle) * circleWidth, windowHeight * 0.5 - Math.sin(angle) * circleWidth));
  }
}
init();
window.onresize = function () {
  windowWidth = canvas.width = window.innerWidth;
  windowHeight = canvas.height = window.innerHeight;
  particles = [];
  context.clearRect(0, 0, windowWidth, windowHeight);
  init();
};


loop();

And this is my html

<section style="height:100%;">
    <div class="ip_first_block" id="ifb">

    </div>
</section>

One of my attemps:

<section style="height:100%;background: -moz-element(#canvas)">
    <div class="ip_first_block" id="ifb">

    </div>
</section>

score 1 · Accepted Answer · answered Apr 12 '18 at 07:28

If you want to use canvas as a background so you can use layering concept. you can adjust canvas layer behind main layer. You can help from this code -

// html

<section>
    <canvas id="canvas" height="300" width="300"></canvas>
    <div></div>
</section>

//css
section {
    position: relative;
} 

canvas {
    border: 1px solid;
    position: absolute;
}

div {
    height: 300px;
    width: 300px;
    position: absolute;
    border: 1px solid red;
}

//js

var dom = document.getElementById("canvas");
var ctx = dom.getContext("2d");

ctx.fillRect(100, 100, 100, 100);

I am unable to use canvas as background

1 Answers1