CODEWITHSUNDEEP
javascriptcanvas
Thomas Czernek
Thomas Czernek

Reputation: 99

How can I dynamically draw on the canvas by reusing the same function?

When a user clicks on the canvas, the coordinates of the cursor are set equal to the start point of a line on the canvas. Then when the user clicks again, the new coordinates are set for the end point of the line, and the line appears. My problem is the function only works once. The user can create one line and that's it. I'm new to the canvas and normally I'd just do something like: document.createElement('div'); every time the target element is clicked to make the code reusable. But in the canvas I can't do this.

I've tried using creating document.createElement for canvas shapes, but that only works for HTML elements, not javascript canvas functions. I've also tried using if and statements to manipulate the current function, but that didn't lead anywhere. This is the code: 

canvas[0].addEventListener('mousedown', setPosition);
const xCoord = [];      
const yCoord = [];  
function setPosition(position) {
    let z = -1; 
    let posX = position.clientX; 
    let posY = position.clientY;
    xCoord.push(posX);
    yCoord.push(posY);  
    z++;
    draw.moveTo(xCoord[z], yCoord[z]);
    z++;
    draw.lineTo(xCoord[z], yCoord[z]);
    draw.stroke();  
}

As you can see the code only creates one line and doesn't work anymore after that because it's already been executed. What I would like is code that creates javascript functions like draw.moveTo and draw.lineTo or something similar to that effect or perhaps another solution.

Upvotes: 1

Views: 119

Answers (1)

Thomas Czernek
Thomas Czernek

Reputation: 99

Fixed it.

It turned out that the code was executing multiple times, it just didn't appear that way because the line kept being drawn over and over in the same location. I noticed this when it started becoming slightly darker.

The real issue was that I needed the index of the array to change every time the canvas was clicked. This would then alter the position and create a pen-like effect. Since the arrays contained the coordinates of the mouse and were being updated with each click, it made the most sense to set index equal to this value.

I did this by setting xCoord[xCoord.length - 2] for the start point and xCoord[xCoord.length - 1] for the end point. This would ensure that I obtain the updated start and end coordinates of the mouse cursor that were being pushed onto this array.

Then I made the if statement to make sure that the values were pushed onto the array before I could called them.

canvas[0].addEventListener('mousedown', setPosition);
const xCoord = [];      
const yCoord = [];  
let z= 0;
function setPosition (position){
    z++;
    let posX = position.clientX; 
    let posY = position.clientY;
    xCoord.push(posX);
    yCoord.push(posY);  
    if (z >= 1) {
        draw.moveTo(xCoord[xCoord.length - 2], yCoord[yCoord.length - 2]);
        draw.lineTo(xCoord[xCoord.length - 1], yCoord[yCoord.length - 1]);
        draw.stroke();
    }
}

Now I'm able to make this beauty... Drawing

Upvotes: 1

Related Questions