How to erase canvas using the cursor -

i'd add responsive canvas web page. black div , should erasable cursor.

div 1 (canvas) on top of div 2 (text). cursor should erase div 1 , reveal div 2.

update

i'm using code it's not working.

var canvas = document.getelementbyid("canvastop");  var ctx = canvas.getcontext("2d");      ctx.linewidth = 10;      ctx.linecap = "round";      ctx.linejoin = "round";      ctx.fillstyle = "skyblue";      ctx.fillrect(0, 0, canvas.width, canvas.height);    var canvasoffset = $("#canvastop").offset();  var offsetx = canvasoffset.left;  var offsety = canvasoffset.top;    var startx;  var starty;  var isdown = false;    function handlemousedown(e) {      e.preventdefault();      startx = parseint(e.clientx - offsetx);      starty = parseint(e.clienty - offsety);      isdown = true;  }    function handlemouseup(e) {      e.preventdefault();      isdown = false;  }    function handlemouseout(e) {      e.preventdefault();      isdown = false;  }    function handlemousemove(e) {      if (!isdown) {          return;      }      mousex = parseint(e.clientx - offsetx);      mousey = parseint(e.clienty - offsety);        // put mousemove stuff here      ctx.save();      ctx.globalcompositeoperation = "destination-out";      ctx.beginpath();      ctx.moveto(startx, starty);      ctx.lineto(mousex, mousey);      ctx.stroke();      startx = mousex;      starty = mousey;  }    $("#canvastop").mousedown(function (e) {      handlemousedown(e);  });  $("#canvastop").mousemove(function (e) {      handlemousemove(e);  });  $("#canvastop").mouseup(function (e) {      handlemouseup(e);  });  $("#canvastop").mouseout(function (e) {      handlemouseout(e);  });

html, body {height:100%}  body {    margin:0; padding:0;  }  #wrapper {    position:relative;     margin:auto;     width:100%;     height:100%;     background-color:#ffffff  }  #canvastop {    position:absolute;     top:0px;     left:0px;     width:100%;     height:100%;  }  #text {    position:absolute;     left:0;     right:0;     margin-left:auto;     margin-right:auto;     width:400px;     height:200px;     text-align:center;     top: 50%;     transform:translatey(-50%);   }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id="wrapper">      <canvas id="canvastop" width=100% height=100%></canvas>      <div id="text">      <p> text text text text text text text text text</p>      <p> text text text text text text</p>      <p> text text text text text text</p>      <p> text text text text text text text text text</p>     </div>  </div>

hope can help!

thanks

these changes code should create "scratch-off" effect:

• move #text before #canvastop
• don't use css change canvas size. doing distort canvas.
• set canvas element's width & height equal #wrapper's width & height.

here refactored code changes annotated:

var canvas = document.getelementbyid("canvastop");  // set canvas element's width/height cover #wrapper  var wrapper=document.getelementbyid('wrapper');  var wrapperstyle=window.getcomputedstyle(wrapper,null);  canvas.width=parseint(wrapperstyle.getpropertyvalue("width"));  canvas.height=parseint(wrapperstyle.getpropertyvalue("height"));  //  var ctx = canvas.getcontext("2d");      ctx.linewidth = 10;      ctx.linecap = "round";      ctx.linejoin = "round";      ctx.fillstyle = "skyblue";      ctx.fillrect(0, 0, canvas.width, canvas.height);      // set "erase" compositing once @ start of app better performance      ctx.globalcompositeoperation = "destination-out";    var canvasoffset = $("#canvastop").offset();  var offsetx = canvasoffset.left;  var offsety = canvasoffset.top;    var startx;  var starty;  var isdown = false;    function handlemousedown(e) {      e.preventdefault();      startx = parseint(e.clientx - offsetx);      starty = parseint(e.clienty - offsety);      isdown = true;  }    function handlemouseup(e) {      e.preventdefault();      isdown = false;  }    function handlemouseout(e) {      e.preventdefault();      isdown = false;  }    function handlemousemove(e) {      if (!isdown) {          return;      }      mousex = parseint(e.clientx - offsetx);      mousey = parseint(e.clienty - offsety);        // put mousemove stuff here      ctx.beginpath();      ctx.moveto(startx, starty);      ctx.lineto(mousex, mousey);      ctx.stroke();      startx = mousex;      starty = mousey;  }    $("#canvastop").mousedown(function (e) {      handlemousedown(e);  });  $("#canvastop").mousemove(function (e) {      handlemousemove(e);  });  $("#canvastop").mouseup(function (e) {      handlemouseup(e);  });  $("#canvastop").mouseout(function (e) {      handlemouseout(e);  });

html, body {height:100%}  body { margin:0; padding:0; }  #wrapper {    position:relative;     margin:auto;     width:100%;     height:100%;     background-color:#ffffff;  }  #canvastop {    position:absolute;     top:0px;     left:0px;   }  #text {    position:absolute;     left:0;     right:0;     margin-left:auto;     margin-right:auto;     width:400px;     height:200px;     text-align:center;     top: 50%;     transform:translatey(-50%);   }  #canvas{border:1px solid red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  <h4>drag mouse on center "scratch-off" reveal</h4>  <div id="wrapper">    <!-- move #text before #canvastop -->    <div id="text">      <p> text text text text text text text text text</p>      <p> text text text text text text</p>      <p> text text text text text text</p>      <p> text text text text text text text text text</p>    </div>    <canvas id="canvastop" width=512 height=512></canvas>  </div>