рисовать прямоугольники прямоугольника, а затем исчезать javascript

Question

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

appendSection() сначала добавляет изображение с appendPicture(), которое просто добавляет холст к div, после этого функция запускается, холст и контекст создаются, а затем для каждого hotSpot, в котором есть 3 в этом случае , он будет рисовать прямоугольник, который он делает, затем они исчезают.

function appendSection(theSection, list) { 
     list.append('<label class="heading">' + theSection.description + '</label><br/><hr><br/>'); 
     if (theSection.picture) { 
      appendPicture(list, theSection); 
      var canvas = document.getElementById('assessmentImage'); 
      var ctx=canvas.getContext("2d"); 
      var img=new Image(); 
       img.onload = function() { 
        ctx.drawImage(img, 0, 0,canvas.width,canvas.height); 
       } 
       img.src = "data:image/jpeg;base64,"+ theSection.picture; 
      if(theSection.allHotSpots.length > 0) { 
       for(var x = 0; x < theSection.allHotSpots.length; x++) { 
        appendHotSpot(list, theSection.allHotSpots[x], theSection.thePicture, ctx); 
       } 
      } 
     } 
     appendSectionQuestions(theSection, list); 
     if (theSection.allSubSections) { 
      for (var x = 0; x < theSection.allSubSections.length; x++) { 
       var theSectionA = theSection.allSubSections[x]; 
       appendSection(theSectionA, list); 
      } 
     } 
    } 

    function appendHotSpot(list, HotSpot, picture, ctx) { 
     var imageWidth = document.getElementById('assessmentImage' + platform).clientWidth; 
     var imageHeight = document.getElementById('assessmentImage' + platform).clientHeight; 

     var xScale = imageWidth/picture.xSize; 
     var yScale = imageHeight/picture.ySize; 

     HotSpot.topLeft = [Math.round(HotSpot.topLeft[0] * xScale), Math.round(HotSpot.topLeft[1] * yScale)]; 
     HotSpot.bottomRight = [Math.round(HotSpot.bottomRight[0] * xScale), Math.round(HotSpot.bottomRight[1] * yScale)]; 


     var rect = {x1: HotSpot.topLeft[0], y1: HotSpot.topLeft[1], x2: HotSpot.bottomRight[0], y2: HotSpot.bottomRight[1]}; 



     ctx.fillStyle = "#FF0000"; 
     ctx.fillRect(rect.x1, rect.y1, rect.x2, rect.y2); 

     //addRect("blue", rect); 

    } 

    function appendPicture(list, theSection) { 


      list.append('<div id="wrapper' + platform + '" style="width:100%; text-align:center">\ 
       <canvas class="assessmentImageSmall" style="width:100%;" id="assessmentImage' + platform + '" align="middle" ></canvas>\ 
       <!--<p style="color:#666;" id="imageInstruction">Tap image to enlarge.</p>-->\ 
       </div>'); 
      $("#wrapper").kendoTouch({ 
             tap: function (e) { 
              switchImage(); 
             } 
            }); 
    } 

Answer 1

Похоже, ваши прямоугольники втягиваются, а затем образ (который загружает асинхронно), в конце концов загружен, а затем рисуются на вершине прямоугольников - сделать их исчезнуть.

Поместите if(theSection.allHotSpots.length > 0 внутри загружаемого груза, чтобы изображение не позднее сбивало прямоугольники.