Drawing in javascript canvas doesnt work properly [duplicate]

Question

Im new to javascript. I just want to generate some random points every frame and draw a graph using them. But the program doesnt clear the canvas before drawing. So the program just keeps adding new pixels. In the end i want to draw graphs acording to the value of currencies (EUR,USD...). Here is a picture with the graph generated ony once: https://ibb.co/fn1qXd Here is a picture when i generate the graph every frame: https://ibb.co/dmQCdJ

<script>

let canvas = document.getElementById("myCanvas");
let context = canvas.getContext("2d");

function loop()
{
    context.clearRect(0, 0, canvas.width, canvas.height);

    let growth=20;
    points[0]=0;
    for(i=1;i<points.length;i++)
        points[i]=points[i-1]+(Math.random()*growth-growth/2);          

    context.strokeStyle="#42BBDB";
    for(i=0;i<points.length-1;i++)
    {
        context.lineWidth=1;
        context.moveTo(i, points[i]+160);
        context.lineTo(i+1, points[i+1]+160);
    }                       

    context.stroke();

    requestAnimationFrame(loop);
}

for(i=0;i<values.length;i++)
    for(j=0;j<values.length;j++)
        if(i!=j)
        {
            let name=values[i]+" "+values[j];
            points=new Array(400);  
            points[0]=0;
            for(k=1;k<points.length;k++)
            {
                let growth=20;
                points[k]=points[k-1]+(Math.random()*growth-growth/2);
            }
        }
loop();
</script>

mihai1990 · Accepted Answer · 2018-05-30 08:35:46Z

0

You should call context.beginPath(); after context.clearRect(0, 0, canvas.width, canvas.height); as described in this answer: https://stackoverflow.com/a/16035567/3337236

https://jsfiddle.net/2wogtevL/

answered May 30, 2018 at 8:35

mihai1990

6625 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kostas · Accepted Answer · 2018-05-30 08:36:15Z

You should add:

values = [1, 2, 3, 4, 5];
points = [];

Right before the for loop in order to work.

Working Example in Fiddle

let canvas = document.getElementById("myCanvas");
let context = canvas.getContext("2d");

function loop()
{
	context.clearRect(0, 0, canvas.width, canvas.height);
	
	let growth = 20;
	
	for (i = 1; i < points.length; i++)
	{
		points[i] = points[i - 1] + (Math.random() * growth - growth / 2);
	}
	
	context.strokeStyle = "#42BBDB";
	
	for (i = 0; i < points.length - 1; i++)
	{
		context.lineWidth = 1;
		context.moveTo(i, points[i] + 160);
		context.lineTo(i + 1, points[i + 1] + 160);
	}
	
	context.stroke();
	
	requestAnimationFrame(loop);
}

values = [1, 2, 3, 4, 5];
points = [];

for (i = 0; i < values.length; i++)
{
	for (j = 0; j < values.length; j++)
	{
		if (i != j)
		{
			let name = values[i] + " " + values[j];
			
			points = new Array(400);
			
			points[0] = 0;
			
			for (k = 1; k < points.length; k++)
			{
				let growth = 20;
				points[k] = points[k - 1] + (Math.random() * growth - growth / 2);
			}
		}
	}
}

loop();

<canvas id="myCanvas" width="200" height="100"></canvas>

Collectives™ on Stack Overflow

Drawing in javascript canvas doesnt work properly [duplicate]

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related