Canvas update problem

[Kobolt]

Hi
Im making av dynamic knit patern with html and javascript, the user chooses “jumper size” with a form option.
If the user chooses size 1, the code removes 3 spesific lines of the pattern, if size 2 , the code removes 2 line…

The first time the code removes the right lines og draws the canvas right, but if you selsect another size the removed lines is till removed an the code removes the lines it is supposet to remove in addition.

Before removing lines in the pattern i reload the original pattern, so I dont understand what i do wrong.

Thanks i advance.
Kjetil

//Pattern colors:
var diagramfarge = {b:"#5CA5F0" , h:"#999999" , t:"#ff0000" , k:"#333333" , s:"#666666"};
//Pattern,  a square i drawed for each letter with the corresponding color, ny linje mens new line
var diagram = [ "t","b","b","b","h","h","h","h","h","h","h","h","h","b","b","b","nylinje", // 6
				"s","b","b","b","h","h","h","h","h","h","h","h","h","b","b","b","nylinje124", // 33
                "t","b","b","b","h","h","h","h","h","h","h","h","h","b","b","b","nylinje", /*50*/
                "s","b","b","b","h","h","h","h","h","h","h","h","h","b","b","b","nylinje", /*51-67*/
                "t","b","b","b","h","h","h","h","h","h","h","h","h","b","b","b","nylinje", /*68-84*/
                "s","b","b","h","h","h","h","h","h","h","h","h","h","h","b","b","nylinje", /*85-101*/
                "t","b","b","h","h","h","h","h","h","h","h","h","h","h","b","b","nylinje124", /*102-118*/
                "s","b","b","h","h","h","h","h","h","h","h","h","h","h","b","b","nylinje", /*119-135*/
                "t","b","b","h","h","h","h","h","h","h","h","h","h","h","b","b","nylinje", /*136-152*/
                "s","b","b","h","h","h","h","h","h","h","h","h","h","h","b","b","nylinje", /*153-169*/
                "t","b","h","h","h","h","h","h","h","h","h","h","h","h","h","b","nylinje", /*170-186*/
                "s","b","h","h","h","h","h","h","h","h","h","h","h","h","h","b","nylinje", /*203*/
                "t","b","h","h","h","h","h","h","h","h","h","h","h","h","h","b","nylinje12", /*220*/
                "s","b","h","h","h","h","h","s","h","h","h","h","h","h","h","b","nylinje", /*237*/
                "t","h","h","h","h","h","s","h","h","h","h","h","h","h","h","h","nylinje", /*254*/
                "s","h","h","h","h","s","h","h","h","h","h","h","h","h","h","h","nylinje", /*271*/
                "t","h","h","h","h","s","h","h","h","t","t","t","t","t","t","h","nylinje", /*288*/
                "s","h","h","h","h","h","h","h","t","t","h","h","h","t","h","h","nylinje", /*305*/
                "t","h","h","h","h","t","h","h","t","t","h","h","h","t","h","h","nylinje", /*322*/
                "s","h","h","h","h","t","h","h","t","t","h","h","h","t","h","h","nylinje", /*339*/
                "h","h","h","h","h","t","h","h","t","t","h","h","h","t","h","h","nylinje", /*356*/
                "h","h","h","h","h","t","h","t","t","t","h","t","t","t","h","h","nylinje", /*373*/
                "h","h","t","t","t","t","t","t","t","h","t","t","t","t","t","h","nylinje", /*390*/
                "h","t","t","t","t","t","t","t","h","t","t","k","k","k","t","t","nylinje", /*407*/
                "h","t","t","t","t","t","t","h","t","t","k","k","k","k","k","t","nylinje", /*424*/
                "h","t","k","k","k","t","t","h","t","k","k","k","s","k","k","k","nylinje", /*441*/
                "h","k","k","s","k","k","t","t","t","k","k","s","s","s","k","k","nylinje", /*458*/
                "h","k","s","s","s","k","h","h","h","k","k","k","s","k","k","k","nylinje", /*475*/
                "h","k","k","s","k","k","h","h","h","h","k","k","k","k","k","h","nylinje", /*492*/
                "h","h","k","k","k","h","h","h","h","h","h","k","k","k","h","h","nylinje1", /*509*/
                "h","h","h","h","h","h","h","h","h","h","h","h","h","h","h","h","nylinje", /*526*/
                ];
                
                
//This function is calld when size option is changed

function oppdater() {
// Get chosen size
  var st = document.getElementById("velgstorrelse");
  st = st.options[st.selectedIndex].text;
  
  if (st == 1){stx = st1;}
  if (st == 2){stx = st2;}
  if (st == 4){stx = st4;}
  if (st == 6){stx = st6;}
  if (st == 8){stx = st8;}

//Removes linen from my diagram based on chosen size
    diagramX = diagram;
if ( st < 6 ) //if size 1,2,4
	{diagramX.splice(33,17);//Fjerner linje 3
	 diagramX.splice(118,17);//Fjerner linje 8
	}
if( st < 4 ) //if size 1,2
	{diagramX.splice(220,17);//Fjerner linje 13
     }
if( st == 1 ) //if size 1
	{diagramX.splice(509,17);//Fjerner linje 32
	}
	
                
// Draw the "pattern" on the canvas
    var canvas = document.getElementById("diagramA");
    var ctx = canvas.getContext("2d");
    ctx.clearRect(0, 0, 600, 700);
    
    var x = 0, y = 0;
	for (f in diagramX) {
	  if(diagramX[f] == "nylinje") {y++; x = 0;}
	  else if(diagramX[f] == "nylinje1") {
	    y++; x = 0;
	    if(st == 1){ f += 16;}
	    }
	 else if(diagramX[f] == "nylinje12") {
	    y++; x = 0;
	    if(st < 3){ f += 16;}}
	 else if(diagramX[f] == "nylinje124") {
	     y++; x = 0;
	    if(st < 6){ f += 16;}
	  }
	 else{
 	 ctx.fillStyle = diagramfarge[diagramX[f]];
 	 ctx.fillRect(x*20+10, y*20, 16, 16);
 	 x++;
	 }
}

[Sky020]

Welcome, Kobolt.

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

[Sky020]

Some things I notice about the code:

• Best to declare f: for (f in diagramX) {
• You are altering the value of f as you go through the loop, but I cannot see this doing anything.

[Kobolt]

Hi
I finally found the problem, the splice doesn’t only apply to the array “diagramX”, it also apply to the original array “diagram”.

old code:     diagramX = diagram;
new code:     diagramX = [...diagram];