I tried using a forEach loop on an array of points and a canvas drawing context.
This is a simplified sample:
<html>
<head>
<<script>
function showPoints(ctx,data) {
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(0, data[0]);
data.forEach(function(pt,i){
lineTo(10*i, pt);
lineTo(10*(i+1), pt);
},ctx);
ctx.stroke();
}
</script>
</head>
<body>
<canvas width="500" height="500" id="myCanvas">
<script>
const data = [10,20,25,30,25];
const c = document.getElementById('myCanvas');
const ctx = c.getContext("2d");
showPoints(ctx, data);
</script>
</body>
<html>
This fails with ReferenceError: lineTo is not defined at CanvasRenderingContext2D
Sure, ctx.lineTo is defined, used before and still visible directly above the forEach line.
Passing ctx as a this parameter seems ok as well, in my understanding of the error message.
Any hints what I’m doing/understanding wrong, please? (javascript is not my native language)
Sure I could replace the forEach construct, but I want to learn its usage.