javascript canvas erasing tool doesnt do anything

Question

http://joeybabcock.me/tests/php/5.php I have the drawing app above based on phpacademy's example, and if you go on it, you will see the black one on the end, its supposed to be an erase tool, but I can't get it to work, I have the following:

 var swetch = document.createElement('div');    
 swetch.className = 'swetch';
 swetch.style.backgroundColor = "rgba(0,0,0,0)";
 swetch.addEventListener('click', setEraser);
 document.getElementById('colors').appendChild(swetch);

And also:

function setEraser(){
context.fillStyle = "rgba(0,0,0,0)";
context.globalCompositeOperation = "destination-out";
context.strokeStyle = "rgba(0,0,0,0)";
swetch.className += ' active';
var active = document.getElementsByClassName('active')[0];
if(active){
    active.className = 'swatch';
}
}

I've tried creating a simple swatch that has the css property "transparent" and also one with "rgba(0, 0, 0, 0)" but neither work.

i've tried all the answers on stackoverflow and google, and many different methods if globalCompositeOperation.

Answer 1

Here's a simple example that uses "destination-out" compositing to erase a foreground fill to reveal the background image.

destination-out compositing will "erase" the existing content wherever new strokes are drawn.

In this example:

A background canvas has an image
A foreground canvas exactly overlaps the background canvas
The foreground canvas initially is filled with an opaque color
globalCompositeOperation="destination-out" is used to "erase" the opaque color to reveal parts of the image below.

Demo: http://jsfiddle.net/m1erickson/fjTLF/

在此处输入图片说明

Code:

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    #wrapper{
        position:relative;
        width:300px;
        height:300px;
    }
    #canvasTop,#canvasBottom{
        position:absolute; top:0px; left:0px;
        border:1px solid green;
        width:100%;
        height:100%;
    }
    #canvasTop{
        border:1px solid red;
    }
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvasTop");
    var ctx=canvas.getContext("2d");
    var canvas2=document.getElementById("canvasBottom");
    var ctx2=canvas2.getContext("2d");

    var canvasOffset=$("#canvasTop").offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;

    var startX;
    var startY;
    var isDown=false;

    var img=new Image();
    img.onload=function(){
        canvas.width=canvas2.width=img.width;
        canvas.height=canvas2.height=img.height;
        ctx.lineWidth=10;
        ctx.lineCap = "round";
        ctx.lineJoin = "round";
        ctx.fillStyle="skyblue";
        ctx.fillRect(0,0,canvas.width,canvas.height);
        ctx2.drawImage(img,0,0);
    };
    img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/KoolAidMan.png";

    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 your 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);});

}); // end $(function(){});
</script>
</head>
<body>
    <div id="wrapper">
        <canvas id="canvasBottom" width=300 height=300></canvas>
        <canvas id="canvasTop" width=300 height=300></canvas>
    </div>
</body>
</html>

Answer 2

If you have a white background you can easily use something like

function eraser(){
      context.fillStyle = "rgb(255, 255, 255)";
      context.strokeStyle = "rgb(255, 255, 255)";
      context.fontStyle = "rgb(255, 255, 255)";
    }

You can have a div with an eraser tool in it or something and then use the onclick="" function

<div id="eraser" class="eraser" onClick="eraser()">

If you have a background image, you can always use this to erase the background image.

javascript canvas erasing tool doesnt do anything

Question

2 answers

solution1
0 2014-02-01 22:06:50

solution2
0 2014-02-01 23:10:31

javascript canvas erasing tool doesnt do anything

Question

2 answers

solution1 0 2014-02-01 22:06:50

solution2 0 2014-02-01 23:10:31

solution1
0 2014-02-01 22:06:50

solution2
0 2014-02-01 23:10:31