CODEWITHSUNDEEP
javascripthtmlcsshtml5-canvas
kjanko
kjanko

Reputation: 592

Make canvas transparent

This is what my body looks like:

body
{
    background-image:url('../images/bg.png');
    background-repeat:no-repeat;
    background-size:fixed 100vw;
    background-position:center;
}

The issue is, the canvas is white instead of being transparent. Is there a way to make it transparent so I can place the dna wave on top of a background?

Codepen example

Upvotes: 0

Views: 8948

Answers (2)

Kaiido
Kaiido

Reputation: 136618

One easy way, is using an offscreen canvas.

First set its context's globalAlpha value to something between 0 and 1, this will determine how fast your previous drawings will disappear.

Then, in the animation loop, before doing the new drawings,

  • clear the offscreen context,
  • draw the visible canvas on the offscreen one,
  • clear the visible canvas
  • draw back the offscreen one on the visible one

In the process, your image will have lost opacity.

var clear = function(){
 // clear the clone canvas  
 cloneCtx.clearRect(0,0,canvasWidth, canvasHeight)
 // this should be needed at init and when canvas is resized but for demo I leave it here
 cloneCtx.globalAlpha = '.8';
 // draw ou visible canvas, a bit less opaque
 cloneCtx.drawImage(context.canvas, 0,0)
 // clear the visible canvas
 context.clearRect(0,0,canvasWidth, canvasHeight)
 // draw back our saved less-opaque image
 context.drawImage(clone, 0,0)
}

var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d'),
    // create an offscreen clone
    clone = canvas.cloneNode(),    
    cloneCtx = clone.getContext('2d'),
    
    canvasWidth = canvas.width =
    clone.width =window.innerWidth,
    canvasHeight = canvas.height = clone.height = window.innerHeight,
    globalTick = 0,
    points = [],
    pointCount = 12,
    pointSpeed = 6,
    spacing = canvasWidth / pointCount,
    pointCount = pointCount + 2,    
    verticalPointRange = 60,
    randomRange = function(min, max){
        return Math.floor( (Math.random() * (max - min + 1) ) + min);
    },
    iPath,
    iPoints;  

var Point = function(x, y, alt){
  this.x = x;  
  this.y = y;
  this.yStart = y;
  this.alt = alt;  
}
    
Point.prototype.update = function(i){
  var range = (this.alt) ? verticalPointRange : -verticalPointRange;
  this.x += pointSpeed;
  this.y = (this.yStart) + Math.sin(globalTick/14) * -range;
  
  if(this.x > (canvasWidth + spacing)){
    this.x = -spacing;
    var moved = points.splice(i, 1);
    points.unshift(moved[0]);
  }
}
     
var updatePoints = function(){
  var i = points.length;
  while(i--){
    points[i].update(i);         
  }
}
              
for(iPoints = 0; iPoints < pointCount; iPoints++){
  var alt = (iPoints % 2 === 0);
  var offset = (alt) ? verticalPointRange : -verticalPointRange;
  points.push(new Point(spacing * (iPoints-1), canvasHeight/2, alt));  
}

var renderPath = function(){
  context.beginPath();
  context.moveTo(points[0].x, points[0].y);
  for(iPath = 1; iPath < pointCount; iPath++){
    context.lineTo(points[iPath].x, points[iPath].y);
  }
  context.stroke();  
}
                    
var loop = function(){
  requestAnimationFrame(loop, canvas);
  clear();
  updatePoints();
  renderPath();
  globalTick++;
};

loop();
canvas { display: block; }
body{
  background-color: ivory;
}
<canvas id="canvas"></canvas>

Upvotes: 3

Rahul
Rahul

Reputation: 4364

Canvases are transparent by default.

Try setting a page background image, and then put a canvas over it. If nothing is drawn on the canvas, you can fully see the page background.

you should try

context.clearRect(0,0,width,height);

for more you can refer How do I make a transparent canvas in html5?

Upvotes: 3

Related Questions