Download your favorite Linux distribution at LQ ISO.
Go Back > Forums > Non-*NIX Forums > Programming
User Name
Programming This forum is for all programming questions.
The question does not have to be directly related to Linux and any language is fair game.


  Search this Thread
Old 01-13-2023, 10:32 AM   #1
LQ Newbie
Registered: Jan 2023
Posts: 2

Rep: Reputation: 0
Post Javascript - Attempting to delete and redraw lines elsewhere on the canvas fails.

I'm working on developing my own basic sorting algorithm visualizer. When I try to swap two integers in an array, I run into a problem. I need the swap function to switch the visible lines on the graph as part of the procedure.

This has previously been developed in Python, and I'm attempting to redo it in Javascript.

My problem is that when I swap two values, the previous lines are not cleared and are just drawn over by the new lines. After attempting to shuffle the array, this is what it looks like:

The array was first sorted from least to greatest, then shuffled.

The code is as follows:

function eraseLine(a, i) {
    ctx.clearRect(i * lineWidth, height - a[i], lineWidth, a[i]);

function swap(a, i, j) {
    // clear the lines already there
    lineWidth = width / a.length;
    ctx.lineWidth = lineWidth;

    eraseLine(a, i);
    eraseLine(a, j);

    // actually swap the values
    var temp = a[i];
    a[i] = a[j];
    a[j] = temp;

    // redraw the new lines
    ctx.strokeStyle = "#FFFFFF";
    ctx.moveTo(i * lineWidth + lineWidth / 2, height);
    ctx.lineTo(i * lineWidth + lineWidth / 2, height - a[i]);

    ctx.moveTo(j * lineWidth + lineWidth / 2, height);
    ctx.lineTo(j * lineWidth + lineWidth / 2, height - a[j]);

async function eraseLines(a, start, end) {
    for(var i = start; i < end; i++) {
        eraseLine(a, i);
        await sleep(50);

async function shuffle(a) {
    for(var i = a.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        swap(a, i, j);
        await sleep(50);
Old 01-23-2023, 01:17 PM   #2
Registered: Oct 2008
Distribution: Slackware [64]-X.{0|1|2|37|-current} ::12<=X<=15, FreeBSD_12{.0|.1}
Posts: 6,005
Blog Entries: 23

Rep: Reputation: 3967Reputation: 3967Reputation: 3967Reputation: 3967Reputation: 3967Reputation: 3967Reputation: 3967Reputation: 3967Reputation: 3967Reputation: 3967Reputation: 3967
Please review the Site FAQ for guidance in asking well formed questions. Especially visit the link from that page, How to Ask Questions the Smart Way for discussion of things to consider when asking others for help.

As this question has attracted no replies and the OP has not returned, it is now off zero reply list.



Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off

Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] ncmpc fails to redraw screen properly after song change when running inside tmux FlinchX Slackware 4 03-11-2020 01:26 AM
LXer: How To Empty a File, Delete N Lines From a File, Remove Matching String From a File, And Remove Empty/Blank Lines From a File In Linux LXer Syndicated Linux News 0 11-22-2017 01:30 PM
how to copy some lines in a file and delete these lines after gartura Linux - General 1 07-20-2010 09:55 AM
windows move slowly (repaint/redraw) and firefox scrolls slowly with ATI driver netrek Debian 3 11-20-2009 02:18 PM
K/Ubuntu 8.10+nvidia driver and chip+some app's screen redraw very slow bigjohn Linux - Desktop 1 03-22-2009 06:59 PM > Forums > Non-*NIX Forums > Programming

All times are GMT -5. The time now is 10:15 PM.

Main Menu
Write for LQ is looking for people interested in writing Editorials, Articles, Reviews, and more. If you'd like to contribute content, let us know.
Main Menu
RSS1  Latest Threads
RSS1  LQ News
Twitter: @linuxquestions
Open Source Consulting | Domain Registration