HTML Canvas Drawing

Question

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

У меня есть следующий jsfiddle нарисовать правильную CheckMark

https://jsfiddle.net/avmxfz2d/

 function drawCorrect(key) { 
     var start = 100; 
     var mid = 145; 
     var end = 250; 
     var width = 20; 
     var leftX = start; 
     var leftY = start; 
     var rightX = mid - (width/2.7); 
     var rightY = mid + (width/2.7); 
     var animationSpeed = 5; 

     var ctx = document.getElementById(key).getContext('2d'); 
     ctx.lineWidth = width; 
     ctx.strokeStyle = 'rgba(0, 150, 0, 1)'; 
     var i; 
     for (i = start; i < mid; i++) { 
     var drawLeft = window.setTimeout(function() { 
      ctx.beginPath(); 
      ctx.moveTo(start, start); 
      ctx.lineTo(leftX, leftY); 
      ctx.stroke(); 
      leftX++; 
      leftY++; 
     }, 1 + (i * animationSpeed)/3); 
     } 

     for (i = mid; i < end; i++) { 
     var drawRight = window.setTimeout(function() { 
      ctx.beginPath(); 
      ctx.moveTo(leftX, leftY); 
      ctx.lineTo(rightX, rightY); 
      ctx.stroke(); 
      rightX++; 
      rightY--; 
     }, 1 + (i * animationSpeed)/3); 
     } 
    } 

    drawCorrect('canvas'); 

Вот что я пытался до сих пор https://jsfiddle.net/zj6L8y17/

 function drawIncorrect(key) { 

     var width = 20; 
     var animationSpeed = 5; 

     var ctx = document.getElementById(key).getContext('2d'); 
     ctx.lineWidth = width; 
     ctx.strokeStyle = 'red'; 

     var startx = 50; 
     var starty = 50; 
     var endx = 150; 
     var endy = 150; 
     var curx = startx; 
     var cury = starty; 

     //Draw left to right 
     ctx.beginPath(); 
     for (var i = 50; i < 150; i++) { 
     var drawLeft = window.setTimeout(function() { 
      ctx.moveTo(startx, starty); 
      ctx.lineTo(curx++, cury++); 
      ctx.stroke(); 
     }, 1 + (i * animationSpeed)/3); 
     } 
     ctx.closePath(); 

     startx = 150; 
     starty = 50; 
     endx = 50; 
     endy = 150 
     curx = startx; 
     cury = starty; 
     //Draw right to left 
     ctx.beginPath(); 
     for (var i = 50; i < 150; i++) { 
     var drawRight = window.setTimeout(function() { 
      ctx.moveTo(startx, starty); 
      ctx.lineTo(curx--, cury++); 
      ctx.stroke(); 
     }, 1 + (i * animationSpeed)/3); 
     } 
     ctx.stroke(); 
    } 

    drawIncorrect('canvas'); 

Каждая нога обращается отдельно он работает, но если я объединю две анимации, это просто не удастся

Answer 1

мне удалось заставить его работать

function drawIncorrect(key) { 

     var width = 20; 
     var animationSpeed = 5; 

     var ctx = document.getElementById(key).getContext('2d'); 
     ctx.lineWidth = width; 
     ctx.strokeStyle = 'red'; 


     var lx = 50; 
     var ly = 50; 

     //Draw left to right 
     ctx.beginPath(); 
     for (var i = 50; i < 150; i++) { 
     var drawLeft = window.setTimeout(function() { 
      ctx.moveTo(50, 50); 
      ctx.lineTo(lx++, ly++); 
      ctx.stroke(); 
      if (ly == 150) { 
      var rx = 150; 
      var ry = 50; 
      ctx.beginPath(); 
      for (var i = 50; i < 150; i++) { 
       var drawRight = window.setTimeout(function() { 
       ctx.moveTo(150, 50); 
       ctx.lineTo(rx--, ry++); 
       ctx.stroke(); 
       }, 1 + (i * animationSpeed)/3); 
      } 
      ctx.stroke(); 
      } 
     }, 1 + (i * animationSpeed)/3); 
     } 


    } 

    drawIncorrect('canvas');