Question

I’m tring to draw an expanding and contracting ring that pulses using javascript and html 5. The problem is (using the below code) when the path is repainted the current path remains visible and just gets fatter. Anybody know why this could be?

 function drawOuterInfoCircle(){
     var number = 25;
     var increase = true;

     function draw(){
         if(increase==true){
             number++
             //alert('increase');
             if(number==30){
                 increase=false
                 }
             }           
         if(increase==false){
             number--;
             //alert('decrease');
             if(number==25){
                 increase=true
             }
         }               
         var drawingCanvas = document.getElementById('canvas_circle');
         var drawingContext1 = drawingCanvas.getContext('2d');
         drawingContext1.strokeStyle = "#990000";
         drawingContext1.lineWidth = 12;
         drawingContext1.beginPath();
         drawingContext1.arc(100, 100, number, 0, Math.PI*2, true);
         drawingContext1.closePath();
         drawingContext1.stroke();       
     }
     setInterval(draw,100);      
 }

I’ve tried clearing the canvas with the following (from post 3088229) tna

drawingContext1.fillStyle = 'rgba(0,0,0,0)';    
drawingContext1.fill();

the fiddle

Answer 1

You are filling with opacity 0, try rgba(0,0,0,1)