라인 ECG에서 작동하지 않는 애니메이션으로 결합하기

Question

처음에는 잘 작동하지만 일부 지점 이후에는 애니메이션이 작동하지 않습니다. ECG 그래프와 같아야합니다. 그래프는 슬라이스로 멈추지 않고 계속되어야합니다 사전에 데이터

var continueAnimation = true; 
 

 
     $(document).ready(function() { 
 
      sendArray(); 
 
      
 
     }); 
 
     
 
     var ecgVAlues = [51, 59, 61, 66, 76, 88, 103, 110, 122, 132, 139, 154, 166, 178, 193, 210, 232, 254, 273, 286, 286, 278, 256, 212, 164, 122, 83, 51, 34, 15, 12, 2, 2, 5, 7, 0, -5, 0, 5, 0, 2, 5, 5, 5, 10, 12, 17, 17, 20, 22, 20, 22, 17, 17, 15, 12, 10, 7, 10, 12, 7, 5, 7, 7, 10, 5, 10, 12, 17, 17, 22, 20, 17, 20, 20, 22, 34, 46, 44, 49, 61, 51, 42, 32, 24, 10, 0, -2, -5, 0, 0, 2, -5, 56, 381, 884, 784, -12, -208, -22, -27, 7, -10, 2, 2, 7, 10, 10, 10, 17, 20, 29, 42, 46, 56, 66, 71, 81, 93, 112, 125, 149, 168, 186, 198, 205, 200, 173, 127, 83, 39, 2, -27, -56, -71, -81, -88, -95, -93, -90, -95, -100, -95, -100, -100, -105, -103, -105, -110, -110, -115, -117, -122, -129, -129, -139, -144, -149, -161, -168, -171, -181, -183, -186, -188, -193, -190, -193, -190, -190, -193, -193, -193, -195, -198, -195, -188, -188, -186, -181, -176, -161, -149, -142, -137, -112, -107, -117, -112, -117, -122, -127, -127, -122, -112, -105, -95, -88, -51, 190, 674, 793, 56, -291, -134, -110, -56, -81, -61, -61, -49, -46, -42, -34, -27, -12, 2, 12, 29, 44, 61, 78, 103, 127, 151, 176, 200, 229, 247, 264, 283, 288, 283, 259, 222, 195, 164, 139, 132, 122, 129, 132, 137, 144, 159, 154, 161, 168, 166, 171, 178, 186, 193, 190, 188, 193, 188, 183, 181, 181, 176, 171, 178, 178, 168, 164, 164, 166, 164, 161, 159, 154, 156, 154, 154, 146, 139, 139, 137, 134, 129, 129, 127, 137, 144, 156, 149, 159, 166, 146, 139, 129, 120, 107, 103, 95, 98, 103, 103, 100, 95, 242, 679, 1079, 593, -51, -22, 81, 85, 83, 88, 83, 95, 100, 100, 107, 105, 110, 120, 122, 129, 144, 149, 151, 159, 171, 188, 208, 234, 264, 288, 310, 325, 327, 310, 276, 232, 181, 132, 88, 61, 44, 32, 24, 17, 12, 7, 12, 20, 2, -2, 0, -7, -20, -27, -27, -32, -44, -59, -71, -78, -78, -78, -78, -78, -90, -103, -117, -129, -134, -134, -132, -129, -120, -112, -110, -105, -107, -103, -100, -103, -105, -107, -110, -103, -88, -73, -73, -66, -44, -46, -54, -59, -68, -81, -90, -93, -93, -88, -85, -85, -88, -56, 195, 701, 862, 81, -293, -100, -95, -51, -68, -49, -44, -29, -17, -7, -2, 7, 20, 34, 51, 71, 78, 95, 110, 127, 144, 156, 178, 193, 215, 234, 244, 247, 237, 215, 166, 112, 61, 17, -20, -42, -56, -66, -66, -66, -68, -66, -59, -59, -63, -59, -54, -56, -61, -56, -61, -63, -61, -61, -63, -66, -66, -68, -71, -76, -81, -88, -93, -100, -107, -115, -122, -127, -132, -134, -137, -142, -142, -149, -149, -151, -156, -159, -161, -159, -149, -137, -132, -132, -112, -103, -115, -117, -129, -144, -154, -161, -159, -156, -154, -144, -146, -132, 49, 522, 811, 161, -327, -215, -161, -112, -125, -110, -105, -93, -88, -78, -73, -66, -56, -44, -34, -24, -12, 2, 7, 17, 39, 59, 78, 100, 117, 139, 154, 161, 164, 142, 103, 61, 15, -24, -59, -83, -98, -105, -110, -107, -105, -103, -100, -95, -93, -85, -83, -73, -68, -61, -56, -49, -42, -39, -34, -32, -27, -24, -22, -20, -22, -17, -17, -17, -17, -12, -7, -7, -5, -5, -2, -2, 0, 0, 0, 0, 5, 10, 12, 15, 17, 24, 42, 54, 51, 68, 88, 81, 76, 71, 56, 49, 44, 42, 49, 54, 59, 63, 61, 149, 505, 952, 769, 17, -125, 51, 49, 83, 71, 83, 88, 95, 100, 105, 105, 117, 127, 134, 146, 156, 166, 178, 186, 200, 215, 227, 249, 266, 288, 303, 317, 317, 310, 283, 237, 186, 146, 105, 71, 54, 44, 34, 27, 24, 24, 27, 29, 24, 22, 29, 29, 32, 34, 39, 42, 44, 46, 49, 49, 51, 51, 49, 49, 44, 44, 44, 39, 34, 34, 34, 32, 29, 29, 32, 29, 27, 27, 24, 22, 22, 24, 22, 22, 22, 22, 22, 24, 34, 46, 54, 56, 71, 73, 61, 61, 51, 34, 27, 15, 15, 20, 20, 22, 17, 34, 220, 703, 996, 361, -166, -63, 2, 27, 17, 27, 27, 37, 39, 44, 44, 51, 59, 71, 83, 90, 105, 122, 129, 144, 159, 173, 193, 215, 242, 261, 276, 286, 286, 271, 232, 181, 137, 100, 54, 24, 12, -2, -5, -12, -12, -17, -17, -7, -17, -20, -10, -10, -10, -5, -2, 0, 0, 2, 7, 7, 5, 5, 2, 0, 0, -7, -5, -12, -17, -17, -22, -22, -20, -24, -22, -20, -24, -22, -22, -17, -17, -22, -17, -20, -20, -17, -22, -17, -15, -2, 10, 7, 15, 32, 27, 17, 12, 2, -12, -20, -22, -22, -15, -12, -15, -17, 37, 330, 847, 884, 56, -232, -34, -44, -5, -27, -7, -10, 0, 2, 5, 10, 17, 27, 39, 54, 66, 83, 95, 110, 129, 139, 161, 181, 203, 227, 249, 264, 269, 264, 242, 205, 154, 110, 66, 29, 5, -15, -20, -29, -39, -49, -54, -46, -51, -61, -61, -59, -56, -49, -44, -34, -27, -22, -20, -15, -7, -5, 0, 2, 0, 5, 0, 2, 7, 2, 0, 2, 0, -2, -7, -12, -20, -27, -37, -44, -54, -59, -59, -66, -68, -71, -73, -71, -61, -56, -59, -61, -44, -56, -76, -83, -98, -112, -120, -132, -134, -129, -127, -125, -129, -88, 171, 691, 786, -12, -337, -166, -154, -110, -132, -117, -110, -100, -98, -93, -88, -76, -66, -54, -42, -27, -12, -5, 7, 27, 42, 61, 83, 105, 132, 154, 171, 178, 176, 154, 115, 63, 15, -29, -71, -100, -120, -137, -144, -151, -154, -159, -159, -164, -166, -161, -161, -161, -161, -156, -161, -156, -156, -159, -156, -159, -159, -164, -161, -166, -173, -173, -178, -181, -178, -178, -178, -178, -176, -168, -171, -164, -156, -149, -142, -139, -132, -122, -110, -105, -93, -76, -59, -39, -34, -12, 2, 2, 7, 7, 2, 7, 7, 17, 32, 44, 59, 63, 71, 215, 635, 1016, 557, -51, -34, 78, 107, 112, 127, 137, 149, 154, 161, 161, 159, 166, 176, 183, 188, 198, 208, 217, 227, 234, 249, 261, 276, 291, 308, 322, 325, 320, 305, 271, 220, 171, 122, 78, 49, 24, 15, 7, 2, 0, -7, -2, -2, -15, -12, -2, 0, 0, 10, 17, 22, 24, 34, 34, 34, 39, 37, 34, 34, 34, 34, 34, 32, 34, 37, 34, 39, 39, 39, 39, 37, 37, 32, 27, 27, 22, 10, 7, 5, -5, 0, -2, 2, 12, 17, 10, 17, 24, 7, 2, -2, -15, -22, -22, -22, -17, -10, -5, -5, -10, 83, 449, 920, 754, -37, -188, 0, -22, 5, -5, 0, 2, 10, 7, 12, 10, 17, 27, 39, 54, 66, 73, 83, 98, 107, 120, 134, 154, 173, 193, 210, 217, 217, 208, 176, 132, 78, 32, -10, -49, -73, -95, -107, -122, -129, -134, -149, -146, -144, -161, -164, -154, -154, -151, -144, -132, -132, -122, -112, -105, -107, -95, -88, -83, -76, -66, -56, -54, -46, -37, -29, -20, -10, -5, 5, 15, 20, 27, 32, 39, 44, 42, 44, 44, 42, 44, 37, 37, 37, 39, 42, 37, 32, 49, 42, 24, 22, 12, 0, -10, -24, -29, -27, -37, -44, -59, -54, 144, 613, 908, 239, -291, -178, -137, -112, -132, -117, -122, -112, -107, -98, -93, -83, -66, -51, -34, -17, 5, 24, 37, 56, 71, 88, 105, 132, 161, 188, 212, 232, 239, 234, 210, 168, 134, 95, 49, 29, 12, 0, 0, -5, -5, -2, -5, 7, 7, 0, 5, 12, 10, 10, 15, 15, 10, 10, 10, 5, 2, 0, 0, -2, -7, -10, -17, -24, -27, -39, -44, -56, -61, -73, -88, -95, -103, -117, -120, -129, -139, -146, -156, -156, -171, -173, -178, -188, -198, -193, -193, -186, -188, -173, -166, -183, -183, -198, -205, -215, -222, -220, -222, -217, -215, -217, -217, -66, 381, 774, 310, -334, -327, -210, -193, -188, -183, -176, -168, -164, -159, -154, -149, -142, -134, -132, -125, -112, -110, -107, -100, -93, -78, -61, -44, -22, 0, 20, 32, 34, 27, -5, -46, -98, -144, -183, -212, -232, -242, -247, -251, -254, -254, -251, -244, -242, -244, -237, -232, -227, -222, -217, -212, -210, -208, -200, -200, -195, -193, -190, -188, -188, -190, -186, -181, -181, -178, -173, -171, -171, -168, -164, -164, -156, -154, -154, -149, -139, -134, -129, -125, -117, -103, -83, -73, -66, -46, -29, -34, -34, -39, -46, -51, -54, -54, -46, -42, -34, -29, -27, 78, 454, 857, 562, -115, -193, -44, -24, 5, 0, 12, 22, 29, 39, 42, 42, 56, 63, 71, 83, 95, 107, 122, 132, 144, 161, 186, 203, 225, 247, 266, 278, 278, 269, 242, 200, 149, 110, 66, 37, 17, 5, 2, 0, 0, -5, 2, 7, 5, 7, 15, 17, 22, 24, 29, 34, 39, 42, 44, 46, 46, 49, 54, 49, 46, 44, 44, 39, 37, 34, 29, 29, 29, 29, 27, 24, 20, 17, 15, 12, 10, 10, 7, 5, 5, 5, 5, 20, 24, 22, 27, 42, 32, 20, 10, -2, -17, -24, -32, -29, -24, -22, -27, -27, 32, 325, 835, 876, 61, -229, -29, -39, 0, -12, 5, 7, 24, 29, 37, 39, 51, 61, 76, 88, 98, 110, 120, 134, 149, 161, 181, 203, 225, 249, 271, 283, 291, 283, 259, 220, 168, 125, 76, 37, 17, -5, -20, -27, -34, -37, -46, -49, -42, -56, -66, -56, -56, -59, -56, -49, -46, -39, -37, -34, -34, -29, -27, -27, -27, -24, -22, -20, -17, -20, -12, -12, -10, -5, 0, 0, 2, 7, 7, 10, 12, 12, 17, 17, 17, 15, 17, 22, 27, 37, 37, 34, 49, 44, 24, 12, -2, -20, -34, -42, -46, -44, -46, -44, -51, -44, 115, 564, 923, 391, -208, -159, -68, -54, -61, -54, -61, -56, -59, -56, -61, -59, -49, -39, -32, -20, -10, -2, 7, 22, 39, 59, 78, 103, 134, 164, 186, 203, 210, 205, 183, 139, 95, 61, 27, 5, -5, -12, -5, -5, -2, 0, 0, 17, 17, 7, 17, 20, 17, 15, 22, 24, 27, 24, 27, 20, 15, 5, 0, -15, -29, -44, -59, -71, -83, -90, -98, -103, -110, -115, -122, -122, -127, -129, -132, -134, -134, -132, -127, -120, -115, -105, -100, -95, -85, -73, -66, -61, -61, -44, -39, -54, -49, -51, -54, -59, -61, -59, -49, -49, -42, -42, -37, 144, 615, 945, 354, -212, -149, -83, -66, -78, -71, -73, -68, -63, -61, -61, -56, -56, -49, -42, -39, -32, -27, -22, -17, -10, 0, 17, 39, 61, 78, 93, 100, 98, 81, 51, 2, -51, -98, -142, -171, -183, -193, -198, -200, -203, -205, -203, -198, -203, -205, -203, -200, -203, -200, -200, -198, -193, -193, -188, -186, -183, -178, -176, -173, -171, -171, -171, -171, -173, -168, -171, -168, -164, -164, -161, -161, -156, -156, -156, -151, -149, -149, -142, -142, -139, -129, -117, -115, -115, -98, -95, -107, -110, -115, -122, -132, -142, -139, -134, -132, -127, -127, -127, -12, 388, 757, 366, -254, -283, -166, -129, -112, -110, -103, -93, -85, -83, -73, -63, -54, -42, -24, -10, 7, 27, 44, 61, 81, 103, 129, 154, 181, 212, 234, 251, 256, 254, 229, 190, 144, 107, 71, 42, 24, 12, 2, 0, 0, 0, 5, 5, 0, 5, 2, 5, 7, 12, 15, 20, 24, 27, 24, 29, 29, 27, 29, 32, 27, 24, 24, 24, 22, 17, 20, 20, 22, 20, 22, 27, 22, 24, 27, 29, 27, 27, 34, 46, 59, 59, 66, 83, 78, 68, 66, 54, 39, 27, 22, 17, 24, 22, 22, 17, 56, 310, 815, 964, 190, -200, -24, -12, 20, 5, 20, 15, 34, 34, 37, 39, 42, 54, 63, 73, 85, 100, 110, 120, 139, 146, 159, 176, 200, 222, 244, 254, 269, 264, 249, 210, 161, 117, 73, 39, 22, 0, -5, -7, -12, -17, -24, -24, -15, -15, -27, -22, -17, -17, -15, -7, -7, -5, -2, -2, 0, -2, 0, -5, -5, -10, -17, -17, -24, -29, -34, -37, -34, -32, -34, -37, -34, -42, -42, -44, -46, -49, -44, -44, -42, -46, -46, -44, -34, -22, -17, -20, -7, 0, -15, -22, -27, -37, -49, -49, -54, -51, -49, -46, -44, -51, 49, 417, 896, 713, -76, -225, -44, -63, -44, -49, -39, -39, -27, -24, -17, -17, -10, 2, 10, 24, 44, 54, 63, 73, 83, 95, 110, 129, 154, 178, 205, 225, 232, 229, 220, 183, 139, 103, 66, 37, 22, 12, 10, 10, 12, 17, 12, 20, 29, 22, 17, 27, 24, 22, 22, 22, 22, 22, 20, 17, 10, 7, 0, -5, -7, -15, -17, -27, -34, -37, -37, -34, -37, -34, -37, -34, -34, -34, -37, -44, -46, -49, -56, -61, -68, -78, -83, -88, -88, -85, -78, -78, -83, -63, -61, -71, -76, -81, -83, -88, -93, -90, -88, -85, -78, -83, -81, 73, 520, 906, 422, -227, -205, -95, -85, -88, -76, -73, -63, -61, -54, -54, -49, -44, -39, -32, -22, -24, -32, -46, -56, -56, -54, -39, -27, -5, 17, 37, 56, 63, 51, 29, -12, -71, -120, -166, -205, -227, -244, -251, -254, -254, -249, -247, -232, -227, -227, -222, -215, -212, -212, -200, -195, -188, -183, -176, -166, -159, -151, -149, -146, -142, -139, -142, -144, -144, -146, -146, -146, -149, -154, -156, -161, -166, -171, -173, -176, -183, -188, -190, -190, -193, -195, -200, -200, -193, -188, -188, -188, -178, -171, -183, -190, -198, -208, -220, -222, -222, -217, -217, -220, -220, -222, -132, 215, 632, 403, -308, -449, -327, -337, -322, -349, -325, -315, -293, -264, -232, -200, -166, -132, -107, -85, -63, -46, -24, 0, 24, 61, 98, 137, 183, 222, 256, 291, 308, 315, 310, 276, 254, 210, 151, 129, 100, 78, 56, 22, -7, -29, -39, -49, -54, -49, -44, -39, -32, -24, -22, -22, -17, -15, -20, -20, -22, -27, -29, -34, -34, -39, -42, -44, -44, -44, -39, -46, -51, -56, -61, -68, -71, -78, -76, -71, -63, -56, -49, -44, -27, -12, -10, -5, 12, 10, 0, 0, -5, -17, -22, -22, -10, 0, 2, 15, 17, 49, 276, 774, 996, 281, -161, -10, 34, 68, 59, 78, 78, 93, 100, 107, 112, 117, 122, 129, 142, 151, 161, 168, 176, 183, 193, 203, 215, 229, 242, 254, 271, 276, 271, 254, 220, 171, 112, 66, 27, -2, -20, -37, -42, -46, -49, -54, -56, -49, -44, -59, -54, -44, -46, -49, -39, -32, -32, -27, -24, -20, -17, -12, -7, -7, -7, -10, -17, -29, -44, -59, -71, -78, -85, -93, -98, -98, -100, -95, -95, -90, -85, -85, -83, -83, -83, -81, -71, -56, -44, -34, -2, 10, 10, 20, 20, 20, 22, 22, 24, 29, 29, 29, 27, 39, 225, 698, 1006, 386, -173, -88, -22, -15, -29, -22, -27, -22, -24, -17, -20, -20, -15, -12, -12, -7, -5, 0, 5, 10, 22, 32, 37, 51, 66, 83, 100, 115, 127, 125, 112, 81, 46, 15, -17, -37, -51, -66, -68, -76, -78, -83, -88]; 
 
     function sendArray() { 
 
      //debugger; 
 
      var array_of_sets = ecgVAlues.slice(0, 101); 
 
      console.log("1"); 
 
      animate(array_of_sets); 
 
      
 
     } 
 

 

 
     var x = 0; 
 
     function animate(data) { 
 
      console.log("2"); 
 
      var canvas = document.getElementById("canvas"); 
 
      var ctx = canvas.getContext("2d"); 
 
      var constant = canvas.height/2; 
 
      var panAtX = canvas.width; 
 

 

 

 
      if (data.length != 0) { 
 
       console.log("3"); 
 
       for (var i = 0; i < data.length; i++) { 
 
        console.log("for " + data.length); 
 
        
 

 
        if (x++ < panAtX) { 
 
         var temp = data[i]; 
 
         var final = constant - (temp); 
 
         var divFinal = (final/10) + constant; 
 
         ctx.fillRect(x, divFinal, 1, 1); 
 
         ctx.lineTo(x, divFinal); 
 
         ctx.stroke(); 
 
        } 
 
        else { 
 
         ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
         ctx.beginPath(); // reset the path 
 
         for (var xx = 0; xx < data.length; xx++) { 
 
          var y = data[i-data.length+xx ]; 
 
          var final = constant - (y); 
 
          var divFinals = (final/10) + constant; 
 
          ctx.fillRect(xx, divFinals, 1, 1); 
 
          ctx.lineTo(xx, divFinals); 
 
         } 
 
         ctx.stroke(); 
 
        } 
 

 
        
 
       } 
 
      } 
 
      if (continueAnimation) { 
 
       requestAnimationFrame(sendArray); 
 
      } 
 
     } 
 

 
$("#stop").click(function() { 
 
    continueAnimation = false; 
 
});

body { 
 
    background-color: ivory; 
 
} 
 
#canvas { 
 
    border: 1px solid red; 
 
}

<button id="stop">Stop</button><br> 
 
<canvas id="canvas" width=400 height=100></canvas>

감사

Answer 1

문제는 x가 panAtx보다 큰 얻을 때, 대신, 당신은 선이 왼쪽으로 이동하려고하지만 그리기 점으로 결국,이다라인

의 나는 우리가 매번 그것을 사용하기 때문에 내가, 외부 상수 변수를 이동

메모를 차단하려면 다른 여기

var constant=351; 
     function animate() { 

      if (x > data.length - 1) { 
       return; 
      } 

      if (continueAnimation) { 
       requestAnimationFrame(animate); 
      } 

      if (x++ < panAtX) { 

       var temp = data[x]; 
       var final = constant-(temp); 
       ctx.fillRect(x, final, 1, 1); 
       ctx.lineTo(x, final); 
       ctx.stroke(); 
      } else { 

       ctx.clearRect(0, 0, canvas.width, canvas.height); 
       ctx.beginPath(); // reset the path 


       for (var xx = 0; xx < panAtX; xx++) { 
        var y = data[x - panAtX + xx]; 
        var final = constant - (y); 
        ctx.fillRect(xx, final, 1, 1); 
        ctx.lineTo(xx, final);       
       } 
       ctx.stroke(); 
      } 
     } 

내가 만드는 변화가 애니메이션 기능을 변경합니다.

var canvas = document.getElementById("canvas"); 
 
      var ctx = canvas.getContext("2d"); 
 

 
      var data = [51, 59, 61, 66, 76, 88, 103, 110, 122, 132, 139, 154, 166, 178, 193, 210, 232, 254, 273, 286, 286, 278, 256, 212, 164, 122, 83, 51, 34, 15, 12, 2, 2, 5, 7, 0, -5, 0, 5, 0, 2, 5, 5, 5, 10, 12, 17, 17, 20, 22, 20, 22, 17, 17, 15, 12, 10, 7, 10, 12, 7, 5, 7, 7, 10, 5, 10, 12, 17, 17, 22, 20, 17, 20, 20, 22, 34, 46, 44, 49, 61, 51, 42, 32, 24, 10, 0, -2, -5, 0, 0, 2, -5, 56, 381, 884, 784, -12, -208, -22, -27, 7, -10, 2, 2, 7, 10, 10, 10, 17, 20, 29, 42, 46, 56, 66, 71, 81, 93, 112, 125, 149, 168, 186, 198, 205, 200, 173, 127, 83, 39, 2, -27, -56, -71, -81, -88, -95, -93, -90, -95, -100, -95, -100, -100, -105, -103, -105, -110, -110, -115, -117, -122, -129, -129, -139, -144, -149, -161, -168, -171, -181, -183, -186, -188, -193, -190, -193, -190, -190, -193, -193, -193, -195, -198, -195, -188, -188, -186, -181, -176, -161, -149, -142, -137, -112, -107, -117, -112, -117, -122, -127, -127, -122, -112, -105, -95, -88, -51, 190, 674, 793, 56, -291, -134, -110, -56, -81, -61, -61, -49, -46, -42, -34, -27, -12, 2, 12, 29, 44, 61, 78, 103, 127, 151, 176, 200, 229, 247, 264, 283, 288, 283, 259, 222, 195, 164, 139, 132, 122, 129, 132, 137, 144, 159, 154, 161, 168, 166, 171, 178, 186, 193, 190, 188, 193, 188, 183, 181, 181, 176, 171, 178, 178, 168, 164, 164, 166, 164, 161, 159, 154, 156, 154, 154, 146, 139, 139, 137, 134, 129, 129, 127, 137, 144, 156, 149, 159, 166, 146, 139, 129, 120, 107, 103, 95, 98, 103, 103, 100, 95, 242, 679, 1079, 593, -51, -22, 81, 85, 83, 88, 83, 95, 100, 100, 107, 105, 110, 120, 122, 129, 144, 149, 151, 159, 171, 188, 208, 234, 264, 288, 310, 325, 327, 310, 276, 232, 181, 132, 88, 61, 44, 32, 24, 17, 12, 7, 12, 20, 2, -2, 0, -7, -20, -27, -27, -32, -44, -59, -71, -78, -78, -78, -78, -78, -90, -103, -117, -129, -134, -134, -132, -129, -120, -112, -110, -105, -107, -103, -100, -103, -105, -107, -110, -103, -88, -73, -73, -66, -44, -46, -54, -59, -68, -81, -90, -93, -93, -88, -85, -85, -88, -56, 195, 701, 862, 81, -293, -100, -95, -51, -68, -49, -44, -29, -17, -7, -2, 7, 20, 34, 51, 71, 78, 95, 110, 127, 144, 156, 178, 193, 215, 234, 244, 247, 237, 215, 166, 112, 61, 17, -20, -42, -56, -66, -66, -66, -68, -66, -59, -59, -63, -59, -54, -56, -61, -56, -61, -63, -61, -61, -63, -66, -66, -68, -71, -76, -81, -88, -93, -100, -107, -115, -122, -127, -132, -134, -137, -142, -142, -149, -149, -151, -156, -159, -161, -159, -149, -137, -132, -132, -112, -103, -115, -117, -129, -144, -154, -161, -159, -156, -154, -144, -146, -132, 49, 522, 811, 161, -327, -215, -161, -112, -125, -110, -105, -93, -88, -78, -73, -66, -56, -44, -34, -24, -12, 2, 7, 17, 39, 59, 78, 100, 117, 139, 154, 161, 164, 142, 103, 61, 15, -24, -59, -83, -98, -105, -110, -107, -105, -103, -100, -95, -93, -85, -83, -73, -68, -61, -56, -49, -42, -39, -34, -32, -27, -24, -22, -20, -22, -17, -17, -17, -17, -12, -7, -7, -5, -5, -2, -2, 0, 0, 0, 0, 5, 10, 12, 15, 17, 24, 42, 54, 51, 68, 88, 81, 76, 71, 56, 49, 44, 42, 49, 54, 59, 63, 61, 149, 505, 952, 769, 17, -125, 51, 49, 83, 71, 83, 88, 95, 100, 105, 105, 117, 127, 134, 146, 156, 166, 178, 186, 200, 215, 227, 249, 266, 288, 303, 317, 317, 310, 283, 237, 186, 146, 105, 71, 54, 44, 34, 27, 24, 24, 27, 29, 24, 22, 29, 29, 32, 34, 39, 42, 44, 46, 49, 49, 51, 51, 49, 49, 44, 44, 44, 39, 34, 34, 34, 32, 29, 29, 32, 29, 27, 27, 24, 22, 22, 24, 22, 22, 22, 22, 22, 24, 34, 46, 54, 56, 71, 73, 61, 61, 51, 34, 27, 15, 15, 20, 20, 22, 17, 34, 220, 703, 996, 361, -166, -63, 2, 27, 17, 27, 27, 37, 39, 44, 44, 51, 59, 71, 83, 90, 105, 122, 129, 144, 159, 173, 193, 215, 242, 261, 276, 286, 286, 271, 232, 181, 137, 100, 54, 24, 12, -2, -5, -12, -12, -17, -17, -7, -17, -20, -10, -10, -10, -5, -2, 0, 0, 2, 7, 7, 5, 5, 2, 0, 0, -7, -5, -12, -17, -17, -22, -22, -20, -24, -22, -20, -24, -22, -22, -17, -17, -22, -17, -20, -20, -17, -22, -17, -15, -2, 10, 7, 15, 32, 27, 17, 12, 2, -12, -20, -22, -22, -15, -12, -15, -17, 37, 330, 847, 884, 56, -232, -34, -44, -5, -27, -7, -10, 0, 2, 5, 10, 17, 27, 39, 54, 66, 83, 95, 110, 129, 139, 161, 181, 203, 227, 249, 264, 269, 264, 242, 205, 154, 110, 66, 29, 5, -15, -20, -29, -39, -49, -54, -46, -51, -61, -61, -59, -56, -49, -44, -34, -27, -22, -20, -15, -7, -5, 0, 2, 0, 5, 0, 2, 7, 2, 0, 2, 0, -2, -7, -12, -20, -27, -37, -44, -54, -59, -59, -66, -68, -71, -73, -71, -61, -56, -59, -61, -44, -56, -76, -83, -98, -112, -120, -132, -134, -129, -127, -125, -129, -88, 171, 691, 786, -12, -337, -166, -154, -110, -132, -117, -110, -100, -98, -93, -88, -76, -66, -54, -42, -27, -12, -5, 7, 27, 42, 61, 83, 105, 132, 154, 171, 178, 176, 154, 115, 63, 15, -29, -71, -100, -120, -137, -144, -151, -154, -159, -159, -164, -166, -161, -161, -161, -161, -156, -161, -156, -156, -159, -156, -159, -159, -164, -161, -166, -173, -173, -178, -181, -178, -178, -178, -178, -176, -168, -171, -164, -156, -149, -142, -139, -132, -122, -110, -105, -93, -76, -59, -39, -34, -12, 2, 2, 7, 7, 2, 7, 7, 17, 32, 44, 59, 63, 71, 215, 635, 1016, 557, -51, -34, 78, 107, 112, 127, 137, 149, 154, 161, 161, 159, 166, 176, 183, 188, 198, 208, 217, 227, 234, 249, 261, 276, 291, 308, 322, 325, 320, 305, 271, 220, 171, 122, 78, 49, 24, 15, 7, 2, 0, -7, -2, -2, -15, -12, -2, 0, 0, 10, 17, 22, 24, 34, 34, 34, 39, 37, 34, 34, 34, 34, 34, 32, 34, 37, 34, 39, 39, 39, 39, 37, 37, 32, 27, 27, 22, 10, 7, 5, -5, 0, -2, 2, 12, 17, 10, 17, 24, 7, 2, -2, -15, -22, -22, -22, -17, -10, -5, -5, -10, 83, 449, 920, 754, -37, -188, 0, -22, 5, -5, 0, 2, 10, 7, 12, 10, 17, 27, 39, 54, 66, 73, 83, 98, 107, 120, 134, 154, 173, 193, 210, 217, 217, 208, 176, 132, 78, 32, -10, -49, -73, -95, -107, -122, -129, -134, -149, -146, -144, -161, -164, -154, -154, -151, -144, -132, -132, -122, -112, -105, -107, -95, -88, -83, -76, -66, -56, -54, -46, -37, -29, -20, -10, -5, 5, 15, 20, 27, 32, 39, 44, 42, 44, 44, 42, 44, 37, 37, 37, 39, 42, 37, 32, 49, 42, 24, 22, 12, 0, -10, -24, -29, -27, -37, -44, -59, -54, 144, 613, 908, 239, -291, -178, -137, -112, -132, -117, -122, -112, -107, -98, -93, -83, -66, -51, -34, -17, 5, 24, 37, 56, 71, 88, 105, 132, 161, 188, 212, 232, 239, 234, 210, 168, 134, 95, 49, 29, 12, 0, 0, -5, -5, -2, -5, 7, 7, 0, 5, 12, 10, 10, 15, 15, 10, 10, 10, 5, 2, 0, 0, -2, -7, -10, -17, -24, -27, -39, -44, -56, -61, -73, -88, -95, -103, -117, -120, -129, -139, -146, -156, -156, -171, -173, -178, -188, -198, -193, -193, -186, -188, -173, -166, -183, -183, -198, -205, -215, -222, -220, -222, -217, -215, -217, -217, -66, 381, 774, 310, -334, -327, -210, -193, -188, -183, -176, -168, -164, -159, -154, -149, -142, -134, -132, -125, -112, -110, -107, -100, -93, -78, -61, -44, -22, 0, 20, 32, 34, 27, -5, -46, -98, -144, -183, -212, -232, -242, -247, -251, -254, -254, -251, -244, -242, -244, -237, -232, -227, -222, -217, -212, -210, -208, -200, -200, -195, -193, -190, -188, -188, -190, -186, -181, -181, -178, -173, -171, -171, -168, -164, -164, -156, -154, -154, -149, -139, -134, -129, -125, -117, -103, -83, -73, -66, -46, -29, -34, -34, -39, -46, -51, -54, -54, -46, -42, -34, -29, -27, 78, 454, 857, 562, -115, -193, -44, -24, 5, 0, 12, 22, 29, 39, 42, 42, 56, 63, 71, 83, 95, 107, 122, 132, 144, 161, 186, 203, 225, 247, 266, 278, 278, 269, 242, 200, 149, 110, 66, 37, 17, 5, 2, 0, 0, -5, 2, 7, 5, 7, 15, 17, 22, 24, 29, 34, 39, 42, 44, 46, 46, 49, 54, 49, 46, 44, 44, 39, 37, 34, 29, 29, 29, 29, 27, 24, 20, 17, 15, 12, 10, 10, 7, 5, 5, 5, 5, 20, 24, 22, 27, 42, 32, 20, 10, -2, -17, -24, -32, -29, -24, -22, -27, -27, 32, 325, 835, 876, 61, -229, -29, -39, 0, -12, 5, 7, 24, 29, 37, 39, 51, 61, 76, 88, 98, 110, 120, 134, 149, 161, 181, 203, 225, 249, 271, 283, 291, 283, 259, 220, 168, 125, 76, 37, 17, -5, -20, -27, -34, -37, -46, -49, -42, -56, -66, -56, -56, -59, -56, -49, -46, -39, -37, -34, -34, -29, -27, -27, -27, -24, -22, -20, -17, -20, -12, -12, -10, -5, 0, 0, 2, 7, 7, 10, 12, 12, 17, 17, 17, 15, 17, 22, 27, 37, 37, 34, 49, 44, 24, 12, -2, -20, -34, -42, -46, -44, -46, -44, -51, -44, 115, 564, 923, 391, -208, -159, -68, -54, -61, -54, -61, -56, -59, -56, -61, -59, -49, -39, -32, -20, -10, -2, 7, 22, 39, 59, 78, 103, 134, 164, 186, 203, 210, 205, 183, 139, 95, 61, 27, 5, -5, -12, -5, -5, -2, 0, 0, 17, 17, 7, 17, 20, 17, 15, 22, 24, 27, 24, 27, 20, 15, 5, 0, -15, -29, -44, -59, -71, -83, -90, -98, -103, -110, -115, -122, -122, -127, -129, -132, -134, -134, -132, -127, -120, -115, -105, -100, -95, -85, -73, -66, -61, -61, -44, -39, -54, -49, -51, -54, -59, -61, -59, -49, -49, -42, -42, -37, 144, 615, 945, 354, -212, -149, -83, -66, -78, -71, -73, -68, -63, -61, -61, -56, -56, -49, -42, -39, -32, -27, -22, -17, -10, 0, 17, 39, 61, 78, 93, 100, 98, 81, 51, 2, -51, -98, -142, -171, -183, -193, -198, -200, -203, -205, -203, -198, -203, -205, -203, -200, -203, -200, -200, -198, -193, -193, -188, -186, -183, -178, -176, -173, -171, -171, -171, -171, -173, -168, -171, -168, -164, -164, -161, -161, -156, -156, -156, -151, -149, -149, -142, -142, -139, -129, -117, -115, -115, -98, -95, -107, -110, -115, -122, -132, -142, -139, -134, -132, -127, -127, -127, -12, 388, 757, 366, -254, -283, -166, -129, -112, -110, -103, -93, -85, -83, -73, -63, -54, -42, -24, -10, 7, 27, 44, 61, 81, 103, 129, 154, 181, 212, 234, 251, 256, 254, 229, 190, 144, 107, 71, 42, 24, 12, 2, 0, 0, 0, 5, 5, 0, 5, 2, 5, 7, 12, 15, 20, 24, 27, 24, 29, 29, 27, 29, 32, 27, 24, 24, 24, 22, 17, 20, 20, 22, 20, 22, 27, 22, 24, 27, 29, 27, 27, 34, 46, 59, 59, 66, 83, 78, 68, 66, 54, 39, 27, 22, 17, 24, 22, 22, 17, 56, 310, 815, 964, 190, -200, -24, -12, 20, 5, 20, 15, 34, 34, 37, 39, 42, 54, 63, 73, 85, 100, 110, 120, 139, 146, 159, 176, 200, 222, 244, 254, 269, 264, 249, 210, 161, 117, 73, 39, 22, 0, -5, -7, -12, -17, -24, -24, -15, -15, -27, -22, -17, -17, -15, -7, -7, -5, -2, -2, 0, -2, 0, -5, -5, -10, -17, -17, -24, -29, -34, -37, -34, -32, -34, -37, -34, -42, -42, -44, -46, -49, -44, -44, -42, -46, -46, -44, -34, -22, -17, -20, -7, 0, -15, -22, -27, -37, -49, -49, -54, -51, -49, -46, -44, -51, 49, 417, 896, 713, -76, -225, -44, -63, -44, -49, -39, -39, -27, -24, -17, -17, -10, 2, 10, 24, 44, 54, 63, 73, 83, 95, 110, 129, 154, 178, 205, 225, 232, 229, 220, 183, 139, 103, 66, 37, 22, 12, 10, 10, 12, 17, 12, 20, 29, 22, 17, 27, 24, 22, 22, 22, 22, 22, 20, 17, 10, 7, 0, -5, -7, -15, -17, -27, -34, -37, -37, -34, -37, -34, -37, -34, -34, -34, -37, -44, -46, -49, -56, -61, -68, -78, -83, -88, -88, -85, -78, -78, -83, -63, -61, -71, -76, -81, -83, -88, -93, -90, -88, -85, -78, -83, -81, 73, 520, 906, 422, -227, -205, -95, -85, -88, -76, -73, -63, -61, -54, -54, -49, -44, -39, -32, -22, -24, -32, -46, -56, -56, -54, -39, -27, -5, 17, 37, 56, 63, 51, 29, -12, -71, -120, -166, -205, -227, -244, -251, -254, -254, -249, -247, -232, -227, -227, -222, -215, -212, -212, -200, -195, -188, -183, -176, -166, -159, -151, -149, -146, -142, -139, -142, -144, -144, -146, -146, -146, -149, -154, -156, -161, -166, -171, -173, -176, -183, -188, -190, -190, -193, -195, -200, -200, -193, -188, -188, -188, -178, -171, -183, -190, -198, -208, -220, -222, -222, -217, -217, -220, -220, -222, -132, 215, 632, 403, -308, -449, -327, -337, -322, -349, -325, -315, -293, -264, -232, -200, -166, -132, -107, -85, -63, -46, -24, 0, 24, 61, 98, 137, 183, 222, 256, 291, 308, 315, 310, 276, 254, 210, 151, 129, 100, 78, 56, 22, -7, -29, -39, -49, -54, -49, -44, -39, -32, -24, -22, -22, -17, -15, -20, -20, -22, -27, -29, -34, -34, -39, -42, -44, -44, -44, -39, -46, -51, -56, -61, -68, -71, -78, -76, -71, -63, -56, -49, -44, -27, -12, -10, -5, 12, 10, 0, 0, -5, -17, -22, -22, -10, 0, 2, 15, 17, 49, 276, 774, 996, 281, -161, -10, 34, 68, 59, 78, 78, 93, 100, 107, 112, 117, 122, 129, 142, 151, 161, 168, 176, 183, 193, 203, 215, 229, 242, 254, 271, 276, 271, 254, 220, 171, 112, 66, 27, -2, -20, -37, -42, -46, -49, -54, -56, -49, -44, -59, -54, -44, -46, -49, -39, -32, -32, -27, -24, -20, -17, -12, -7, -7, -7, -10, -17, -29, -44, -59, -71, -78, -85, -93, -98, -98, -100, -95, -95, -90, -85, -85, -83, -83, -83, -81, -71, -56, -44, -34, -2, 10, 10, 20, 20, 20, 22, 22, 24, 29, 29, 29, 27, 39, 225, 698, 1006, 386, -173, -88, -22, -15, -29, -22, -27, -22, -24, -17, -20, -20, -15, -12, -12, -7, -5, 0, 5, 10, 22, 32, 37, 51, 66, 83, 100, 115, 127, 125, 112, 81, 46, 15, -17, -37, -51, -66, -68, -76, -78, -83, -88]; 
 

 
      // TESTING: fill data with some test values 
 
      //for (var i = 0; i < 5000; i++) { 
 
      // data.push(Math.sin(i/10) * 70 + 100); 
 
      //} 
 

 

 
      var x = 0; 
 
      var panAtX = 250; 
 
      var continueAnimation = true; 
 
      animate(); 
 

 

 
      var constant=351; 
 
      function animate() { 
 

 
       if (x > data.length - 1) { 
 
        return; 
 
       } 
 

 
       if (continueAnimation) { 
 
        requestAnimationFrame(animate); 
 
       } 
 

 
       if (x++ < panAtX) { 
 
       
 
        var temp = data[x]; 
 
        var final = constant-(temp); 
 
        ctx.fillRect(x, final, 1, 1); 
 
        ctx.lineTo(x, final); 
 
        ctx.stroke(); 
 
       } else { 
 

 
        ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
\t \t \t \t \t \t \t \t \t \t ctx.beginPath(); // reset the path 
 
        
 
        
 
        for (var xx = 0; xx < panAtX; xx++) { 
 
         var y = data[x - panAtX + xx]; 
 
         var final = constant - (y); 
 
         ctx.fillRect(xx, final, 1, 1); 
 
         ctx.lineTo(xx, final);       
 
        } 
 
        ctx.stroke(); 
 
       } 
 
      } 
 

 
      $("#stop").click(function() { 
 
       continueAnimation = false; 
 
      });

body { 
 
    background-color: ivory; 
 
} 
 
#canvas { 
 
    border:1px solid red; 
 
}t

<button id="stop">Stop</button> 
 
<br> 
 
<canvas id="canvas" width=300 height=701></canvas>