Холст, мой ластик не работает

Я попытался использовать ластик, как если бы это была кисть, чтобы стирать отчетливо. У меня есть черный прямоугольник и изображение в качестве фона холста. Как я могу стереть части прямоугольника?

Стирание на холсте html5 не работало

моя скрипка: http://jsfiddle.net/FgNQk/10/

var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var width  = window.innerWidth;
    var height = window.innerHeight;
    canvas.height = height;
    canvas.width = width;

    ctx.fillRect(100,100,100,100);

    canvas.addEventListener('mousedown', function(e) {
        this.down = true;   
        this.X = e.pageX ;
        this.Y = e.pageY ;
        this.color = rgb();
    }, 0);
    canvas.addEventListener('mouseup', function() {
        this.down = false;          
    }, 0);
    canvas.addEventListener('mousemove', function(e) {

        if(this.down) {
             with(ctx) {
                beginPath();
                moveTo(this.X, this.Y);
                lineTo(e.pageX , e.pageY );
                strokeStyle = "rgba(255,255,255,0.0)";
                ctx.lineWidth=1;
                stroke();
             }
             this.X = e.pageX ;
             this.Y = e.pageY ;
        }
    }, 0);

javascript canvas erase
person daisy    schedule 13.05.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Решение по ссылке действительно работает. Пытаться:

  with(ctx) {
                    beginPath();
                    moveTo(this.X, this.Y);
                    lineTo(e.pageX , e.pageY );
                    globalCompositeOperation = "destination-out";
                    strokeStyle = "rgba(0,0,0,1)";
                    ctx.lineWidth=1;
                    stroke();
                 }
person RST    schedule 13.05.2013
comment
Я так много пробовал с rgb и забыл про globalCompositeOperation, спасибо - person daisy; 13.05.2013