Рекомендации по «очистке»? canvas

Question

Я создаю класс mootools и использую Mootools Canvas Library, чтобы в принципе просто создать (на данный момент) небольшой квадрат, где есть событие click в другой области области холста. Представьте себе инструмент для рисования и узлы фотошопа.

var Pentool = new Class({ 
    Implements: [Events, Options], 
    initialize: function(canvasel) { 

     CANVAS.init({ 
       canvasElement : canvasel, 
       enableMouse : true 
     }); 

     var _self = this; 

     //add a layer 
     var layer = CANVAS.layers.add(new Layer({ 
       id : 'myLayer' 
     })); 

     var area = new CanvasItem({ 
      id: 'area_', 
      w: 360, 
      h: 500, 
      interactive: true, 

      events: { 
       onDraw: function(ctx) { 
        ctx.fillStyle = 'rgba(255,255,255,0.3)'; 
        ctx.fillRect(0, 0, this.w, this.h); 
        this.setDims(0, 0, this.w, this.h) 
       }, 
       onClick: function(x, y) { 
        _self.addNode(layer, x, y); 
       } 
      } 

     }) 

     layer.add(area); 

     CANVAS.draw(); 


    }, 
    addNode: function(layer, x, y) { 
     var node = new CanvasItem({ 
      id: 'node_', 
      x: x, 
      y: y, 
      fillStyle : 'rgba(255,0,0,1)', 
      events: { 
       onDraw: function(ctx) { 
        ctx.fillStyle = this.fillStyle; 
        ctx.fillRect(this.x, this.y, 12, 12); 
       } 
      } 

     }); 

     layer.add(node);   
     CANVAS.draw(); 

    } 
}) 

Теперь я попробовал все, чтобы остановить это, но всякий раз, когда я нажимаю несколько раз непрозрачность идет вверх (см заливки непрозрачности). Как остановить это? Думаю, мне нужно «очистить» холст.

Answer 1

Я довольно недавно знаком с холстом, но обнаружил, что ctx.beginPath() доставит вам «новый старт», но затем вам также нужно будет сделать moveTo() еще раз, и снова нарисуйте все полигоны и линии.

ctx.fillStyle="rgba(255,255,255,0.5)"; 
ctx.fillRect(10,10,50,50); 
ctx.beginPath(); 
ctx.fillRect(70,10,50,50); 

Это будет нарисовать одинаково непрозрачные коробки.