how do i toggle visibility between 2 canvas using html / css / js /?

canvas, html, javascript

Solution

Here's one way to use a button to toggle visibility of 2 canvases so that only 1 canvas is visible:

use CSS to stack the 2 canvases on top of each other inside a wrapper div using positioning.

Toggle the `style.visibility` of the 2 canvases in response to your button click.

Here's an example:

var canvas1=document.getElementById('canvas1');
canvas1.getContext('2d').fillText('This is canvas1',20,20);
var canvas2=document.getElementById('canvas2');
canvas2.getContext('2d').fillText('This is canvas2',20,20);

swapCanvases();

document.getElementById("test").onclick=function(){
  swapCanvases();
};

function swapCanvases(){
  if(canvas1.style.visibility=='visible'){
    canvas1.style.visibility='hidden';
    canvas2.style.visibility='visible';
  }else{
    canvas1.style.visibility='visible';
    canvas2.style.visibility='hidden';
  }
}

body{ background-color: ivory;}
#wrapper{position:relative;}
#canvas1{position:absolute; border:1px solid red;}
#canvas2{position:absolute; border:1px solid blue;}

<button id="test">Swap Canvas Visibilities</button>
<div id=wrapper>
  <canvas id="canvas1" width=300 height=300></canvas>
  <canvas id="canvas2" width=300 height=300></canvas>
</div>

Problem

Original source