Hello. I will say right away that I am a novice programmer. What is the point: when I scroll down, I want to draw a contour smoothly (i.e. some image as a contour) and when I get to a specific area, the image should be completely drawn, if I scroll back up, the contour should be erased. To begin with, I just want to get a smoothly drawn contour (in this example it is a collection of straight lines - linear Bezier curves). As a result, I caught the error "Uncaught TypeError: Cannot read property '0' of undefined" on the line with the comment // error. I can not understand why I can not get an array of values ​​and draw the outline. Please, help :(

var canvas = document.getElementById("canvas"), ctx = canvas.getContext("2d"); var getLineTo = function(myArr, step) { if(step === undefined) { step = 0.001; } var arr = []; for (var t = 0; t < 1 + step; t += step) { if (t > 1) { t = 1; } for (var i = 0; i < myArr.length - 1; i++) { var bx, by; bx = myArr[i][0] + t *(myArr[i+1][0] - myArr[i][0]); //error by = myArr[i][1] + t *(myArr[i+1][1] - myArr[i][1]); arr[i] = [bx, by]; } } return arr; } var drowLines = function(ctx, arr, delay, pause) { if (delay === undefined) { delay = 20; } if (pause === undefined) { pause = delay; } function delayDraw() { for (var i = 0; i < arr.length - 1; i++) { ctx.moveTo(arr[i][0], arr[i][1]); ctx.lineTo(arr[i+1][0], arr[i+1][1]); ctx.stroke(); if (delay > 0) { setTimeout(delayDraw, delay); } else { delayDraw(); } } } if (pause > 0) { setTimeout(delayDraw, pause); } else { delayDraw(); } } var myArray1 = [[10, 10], [100, 100], [158, 250]]; var mass; mass = getLineTo(myArray1); drowLines(ctx, mass, 30);

    1 answer 1

    In your place, myArr[i+1][0] exceeds the number in the array on the last element. myArr.length returns the amount and you start with 0.

     for (var i = 0; i < myArr.length - 1; i++)
    • Corrected, thanks. Stupid mistake - rubbed my eyes already. - badm3t pm