Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body onload="init();">
  <canvas id="canvas1" width=200 height=200></canvas>
   <canvas id="canvas2" width=200 height=200></canvas>
   <canvas id="canvas3" width=200 height=200></canvas>
  <button onclick="effaceCanvas2();">Efface 2</button>
</body>
</html>
 
canvas {
        position : absolute;
        top : 0px;
        left : 0px;
        border: 1px solid #9C9898;
    }
button {
   position : absolute;
        top : 200px;
        left : 0;
}
#canvas1 {
  /*background-color:red;*/
  z-index:0;
}
​
#canvas2 {
  /*background-color:green;*/
  z-index:1;
}
​
#canvas3 {
  /*background-color:blue;*/
  z-index:-1;
}
 
var ctx1, ctx2, ctx3, canvas1, canvas2, canvas3;
​
function init() {
  canvas1 = document.querySelector("#canvas1");
  ctx1 = canvas1.getContext('2d');
  canvas2 = document.querySelector("#canvas2");
  ctx2 = canvas2.getContext('2d');
  canvas3 = document.querySelector("#canvas3");
  ctx3 = canvas3.getContext('2d');
  
  draw();
}
​
function draw() {
  ctx1.fillStyle= 'red';
  ctx1.fillRect(50, 150, 40, 40);
  
  ctx2.fillStyle= 'green';
  ctx2.fillRect(10, 10, 100, 100);
  
  ctx3.fillRect(150, 130, 10, 10);
}
​
function effaceCanvas2() {
  ctx2.clearRect(0, 0, canvas2.width, canvas2.height);
}
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
MichelBuffapro
0viewers