The lineTo() function does not support passing in an array as its argument

Question

The lineTo() function does not support passing in an array as its argument

My goal is to draw lines based on the coordinates provided in the array called points. However, I encountered an error when calling the method. Oddly enough, when I try to access a specific element using console.log(points[1][1]), it works perfectly. Can someone help point out what I might be missing here?

"Uncaught TypeError: Cannot read property '0' of undefined"

Below is the code snippet:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var points = [[50, 50], [50, 100], [25, 120],
             [100, 50], [70, 90], [100, 90], [70, 120]];

function drawPoints(array) {
    ctx.beginPath();
    ctx.moveTo(array[0][0], array[0][1]);
    for (var i = 1; i <= array.length; i++) {
        ctx.lineTo(array[i][0], array[i][1]);
    }
    ctx.stroke();
}

drawPoints(points);

javascript

Answer 1

Answer №1

Kindly review the following code snippet, which has been recently updated:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var points = [[50, 50], [50, 100], [25, 120],
             [100, 50], [70, 90], [100, 90], [70, 120]];

function drawPoints(array) {
    ctx.beginPath();
    ctx.moveTo(array[0][0], array[0][1]);
    for (var i = 1; i < array.length; i++) {   // The issue was identified here.
        ctx.lineTo(array[i][0], array[i][1]);
    }
    ctx.stroke();
}

drawPoints(points);

Answer 2

Kindly review the following code snippet, which has been recently updated:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var points = [[50, 50], [50, 100], [25, 120],
             [100, 50], [70, 90], [100, 90], [70, 120]];

function drawPoints(array) {
    ctx.beginPath();
    ctx.moveTo(array[0][0], array[0][1]);
    for (var i = 1; i < array.length; i++) {   // The issue was identified here.
        ctx.lineTo(array[i][0], array[i][1]);
    }
    ctx.stroke();
}

drawPoints(points);

Answer 3

Answer №2

Check out this example:

 <canvas id="myCanvas" width="200" height="100" style="border:1px solid #ccc;"></canvas>


    <script>
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        var points = [[50, 50], [50, 100], [25, 120],
            [100, 50], [70, 90], [100, 90], [70, 120]];

        drawPoints(points);

        function drawPoints(array) {

            ctx.beginPath();
            ctx.moveTo(array[0][0], array[0][1]);
            for (var i = 1; i < array.length; i++) {
                console.log("Point Value", array[i][0]);
                ctx.lineTo(array[i][0], array[i][1]);
            }
            ctx.stroke();
        }

    </script>

Answer 4

Check out this example:

 <canvas id="myCanvas" width="200" height="100" style="border:1px solid #ccc;"></canvas>


    <script>
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        var points = [[50, 50], [50, 100], [25, 120],
            [100, 50], [70, 90], [100, 90], [70, 120]];

        drawPoints(points);

        function drawPoints(array) {

            ctx.beginPath();
            ctx.moveTo(array[0][0], array[0][1]);
            for (var i = 1; i < array.length; i++) {
                console.log("Point Value", array[i][0]);
                ctx.lineTo(array[i][0], array[i][1]);
            }
            ctx.stroke();
        }

    </script>

Answer 5

Answer №3

When working with arrays in JavaScript, it's important to remember that the indices start at zero. This means that the first element in an array has an index of 0, and the last element has an index of array.length - 1.

One common mistake is to iterate through an array using a for loop that goes up to array.length, which can cause an error on the final iteration.

A solution to this issue is to adjust your loop to start at index 1 instead:

for (var i = 1; i < array.length; i++) { /*...*/ }

Alternatively, you can take advantage of ES6 features by using something like:

for (const elem of array.slice(1)) {
    ctx.lineTo(...elem);
}

Answer 6

When working with arrays in JavaScript, it's important to remember that the indices start at zero. This means that the first element in an array has an index of 0, and the last element has an index of array.length - 1.

One common mistake is to iterate through an array using a for loop that goes up to array.length, which can cause an error on the final iteration.

A solution to this issue is to adjust your loop to start at index 1 instead:

for (var i = 1; i < array.length; i++) { /*...*/ }

Alternatively, you can take advantage of ES6 features by using something like:

for (const elem of array.slice(1)) {
    ctx.lineTo(...elem);
}

The lineTo() function does not support passing in an array as its argument

Answer №1

Answer №2

Answer №3

Similar questions

javascript The final position achieved through requestAnimationFrame is never precise

Changing the context results in the entire component being re-rendered

How can I retrieve the identical fingerprint used by AWS from x.509 using node-forge?

Having several horizontal scrollbars at once on a single webpage

The way in which the DOM responds to adding or deleting elements from its structure

Issue with timestamp in the Instagram API call to retrieve media using AJAX (GET /media/search)

Issue with Ajax not sending query string to ASP.NET controller

Storing a collection of objects in session storage

Refresh a different Angular Controller after submitting a POST request

Executing function with ng-click in AngularJS only on the second click of the button

Step-by-step guide to start an AngularJs application using TypeScript

What is preventing my div from occupying the entire window space?

managing arrays in JavaScript with multiple tables

Transform a row into a clickable element

Tips for incorporating external libraries into a Grafana data source plugin

Creating a Pre-authentication service for AWS Cognito using VueJS

Tips for creating a div that gracefully fades out its background image when hovered over, while keeping the internal content unaffected

Difficulty with slideToggle and other jQuery animations arises when selecting specific elements

Enhance User Experience by Implementing Event Listeners for Changing Link Visibility Using mouseover and getElementsBy

Experimenting with Jquery hyperlinks beyond the realm of Google Chrome