title: I need some help increasing the height of HTML canvas lines
body: <p>I am doing a project where the user selects what programming language they enjoy out of a radio box. It sets an object to the Local Storage and creates a bar graph and the bars go up depending on what choice the select. I'm having trouble though where if the user selects the language for the third time, it turns out what is in the image. I change the height each time and for some reason it also goes over the axis. I just want the height to change. I'm not super familiar with the canvas. Is there a way I could go about doing this? I just simply want the bar to start at the origin and go up, but not down.
  Code below:</p>
  <pre><code>&lt;!--
  Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
  Click nbfs://nbhost/SystemFileSystem/Templates/Other/html.html to edit this template
  --&gt;
  &lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
        &lt;title&gt;Extra Credit Challenge&lt;/title&gt;
          &lt;meta charset=&quot;UTF-8&quot;&gt;
          &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
          &lt;style&gt;
              #entryArea{
                  border: 1px solid black;
                  width: 30%;
                  border-radius: 100px;
                  text-align: center;
                  margin: auto;
              }
              #myCanvas{
                  border-radius: 25px;
                  border: 1px;
              }
              #submitButton{
                  border-radius: 15px;
                  background-color:lightblue;
                  font-size: 25px;
                  width: 30%;
              }
              input{
                  font-size: 25px;
              }
              #resetButton{
                  border-radius: 15px;
                  background-color:lightblue;  
                  font-size: 25px;
                  width: 30%;  
              }
          &lt;/style&gt;
  &lt;/head&gt;
  &lt;body onload=&quot;init()&quot;&gt;
      &lt;canvas id=&quot;myCanvas&quot; width=&quot;500&quot; height=&quot;450&quot; style=&quot;border:1px solid #000000;&quot;&gt;&lt;/canvas&gt;
  
      &lt;div id=&quot;entryArea&quot;&gt; 
              &lt;p style=&quot;font-size: 20px&quot;&gt;What is your favorite programming language?&lt;/p&gt;
              &lt;p&gt;&lt;input name=&quot;language&quot; type=&quot;radio&quot; value=&quot;Web Design&quot;&gt;Web Design&lt;/p&gt; 
              &lt;p&gt;&lt;input name=&quot;language&quot; type=&quot;radio&quot; value=&quot;Java&quot;&gt;Java&lt;/p&gt;
              &lt;p&gt;&lt;input name=&quot;language&quot; type=&quot;radio&quot; value=&quot;Python&quot;&gt;Python&lt;/p&gt;
              &lt;p&gt;&lt;input name=&quot;language&quot; type=&quot;radio&quot; value=&quot;Other&quot;&gt;Other&lt;/p&gt;
              &lt;button id=&quot;submitButton&quot;&gt;Submit&lt;/button&gt;&lt;br&gt;&lt;br&gt;
              &lt;button id=&quot;resetButton&quot;&gt;Reset&lt;/button&gt;
      &lt;/div&gt;
      
      &lt;script&gt; 
           function init(){ 
                  unCheckItems();
                  drawAxes();
                  walkThroughStorage();  
                  document.getElementById(&quot;submitButton&quot;).addEventListener(&quot;click&quot;, setItemToStorage);
                  document.getElementById(&quot;resetButton&quot;).addEventListener(&quot;click&quot;, clearCanvas); 
              }
              function walkThroughStorage(){
                  var ele = document.getElementById(&quot;entryArea&quot;).querySelectorAll(&quot;input&quot;);
                  var curTextStorage = localStorage.getItem(&quot;ClickedBoxes&quot;);
                  var c = document.getElementById(&quot;myCanvas&quot;);
                  var ctx = c.getContext(&quot;2d&quot;);
                  ctx.beginPath();
                  curTextStorage = JSON.parse(curTextStorage);
                  if(curTextStorage !== null){    
                      for(let i = 0; i&lt;ele.length; i++){
                          let height = (curTextStorage[ele[i].value] || 0) * 40;  
                          if(ele[i].value === &quot;Web Design&quot;){
                              if(curTextStorage[ele[i].value] &gt; 1){ 
                                  ctx.rect(80, 310-(height/2), 30, height);
                                  ctx.lineWidth = 1;
                                  ctx.stroke(); 
                              } 
                              if(curTextStorage[ele[i].value] === 1){
                                  ctx.rect(80, 310, 30, 40);
                                  ctx.lineWidth = 1;
                                  ctx.stroke();  
                              }
                          }
                          else if(ele[i].value === &quot;Java&quot;){
                              if(curTextStorage[ele[i].value] &gt; 1){
                                  ctx.rect(180, 310-(height/2), 30, height);
                                  ctx.lineWidth = 1;
                                  ctx.stroke();
                              }
                              if(curTextStorage[ele[i].value] === 1){
                                  ctx.rect(180, 310, 30, 40);
                                  ctx.lineWidth = 1;
                                  ctx.stroke();  
                              }    
                          }
                          else if(ele[i].value === &quot;Python&quot;){
                              if(curTextStorage[ele[i].value] &gt; 1){
                                 ctx.rect(255, 310-(height/2), 30, height);
                                 ctx.lineWidth = 1;
                                 ctx.stroke();  
                              }
                              if(curTextStorage[ele[i].value] === 1){
                                 ctx.rect(255, 310, 30, 40);
                                 ctx.lineWidth = 1;
                                 ctx.stroke(); 
                              }      
                          }
                          else{
                              if(curTextStorage[ele[i].value] &gt; 1){  
                                 ctx.rect(335, 310-(height/2), 30, height);
                                 ctx.lineWidth = 1;
                                 ctx.stroke();    
                              }
                              if(curTextStorage[ele[i].value] === 1){
                                ctx.rect(335, 310, 30, 40);
                                ctx.lineWidth = 1;
                                ctx.stroke();   
                              }                           
                          }
                      }           
                 }
                 ctx.closePath();
              }
              function drawAxes(){
                  var c = document.getElementById(&quot;myCanvas&quot;);
                  var ctx = c.getContext(&quot;2d&quot;);
                  ctx.beginPath();
                  //draw x axis
                  ctx.moveTo(20,350); 
                  ctx.lineTo(500,350);
                  ctx.lineWidth = 4;
                  ctx.stroke();
                  ctx.closePath();
                  //draw y axis
                  ctx.beginPath();
                  ctx.moveTo(40,400);
                  ctx.lineTo(40,0);  
                  ctx.stroke();
                  ctx.closePath();
                  //draw names at the bottom
                  ctx.font = &quot;15px Arial&quot;;
                  ctx.fillText(&quot;Web Design&quot;, 60,370);
                  ctx.fillText(&quot;Java&quot;, 180,370);
                  ctx.fillText(&quot;Python&quot;, 250,370);
                  ctx.fillText(&quot;Other&quot;, 330,370);
              }
              function unCheckItems(){ 
                  var ele = document.getElementById(&quot;entryArea&quot;).querySelectorAll(&quot;input&quot;);
                  for(let i = 0; i &lt; ele.length; i++) {
                      if(ele[i].checked){
                          ele[i].checked = false;
                      } 
                  }
              }
              function setItemToStorage(){
                  var savedClicks = localStorage.getItem(&quot;ClickedBoxes&quot;);
                  let clickDict = JSON.parse(savedClicks) || {};
                  var ele = document.getElementById(&quot;entryArea&quot;).querySelectorAll(&quot;input&quot;);
                  for(let i = 0; i &lt; ele.length; i++){
                      if(ele[i].checked){                  
                          if(!clickDict[ele[i].value]){     
                              clickDict[ele[i].value]=1;
                          }   
                          else//the key of 1,2,3,4 or 5 (contents of curRandNum) exist in theDict so add one to its value 
                          {
                              clickDict[ele[i].value] += 1;    
                          }   
                      }
                      localStorage.setItem(&quot;ClickedBoxes&quot;,JSON.stringify(clickDict));
                 }
                 drawBars(); 
              }
              function drawBars(){
                 var savedClicks = localStorage.getItem(&quot;ClickedBoxes&quot;);     
                 savedClicks = JSON.parse(savedClicks);
                 var c = document.getElementById(&quot;myCanvas&quot;);
                 var ctx = c.getContext(&quot;2d&quot;);
                 ctx.beginPath(); 
                 var ele = document.getElementById(&quot;entryArea&quot;).querySelectorAll(&quot;input&quot;);
                  for(let i = 0; i &lt; ele.length; i++) {
                      let height = (savedClicks[ele[i].value] || 0) * 40;
                      if(ele[i].checked){
                          if(ele[i].value === &quot;Web Design&quot;){
                              if(savedClicks[ele[i].value] &gt; 1){
                                  clearBar();
                                  //ctx.clearRect(80, 300, 30, 40);   
                                  ctx.rect(80, 310-(height/2), 30, height);
                                  ctx.lineWidth = 0;
                                  ctx.stroke();
                              }  
                              if(savedClicks[ele[i].value] === 1){ 
                                  ctx.rect(80, 310, 30, 40);
                                  ctx.lineWidth = 1;
                                  ctx.stroke(); 
                              }
                          }
                          else if(ele[i].value === &quot;Java&quot;){
                              if(savedClicks[ele[i].value] &gt; 1){
                                  clearBar();
                                  ctx.rect(180, 310-(height/2), 30, height);
                                  ctx.lineWidth = 0;
                                  ctx.stroke();
                              }
                              if(savedClicks[ele[i].value] === 1){
                                  ctx.rect(180, 310, 30, 40);
                                  ctx.lineWidth = 1;
                                  ctx.stroke();  
                              }    
                          }
                          else if(ele[i].value === &quot;Python&quot;){
                              if(savedClicks[ele[i].value] &gt; 1){
                                  clearBar();
                                  ctx.rect(255, 310-(height/2), 30, height);
                                  ctx.lineWidth = 0;
                                  ctx.stroke();
                              }
                              if(savedClicks[ele[i].value] === 1){
                                 ctx.rect(255, 310, 30, 40);
                                 ctx.lineWidth = 1;
                                 ctx.stroke(); 
                              }      
                          }
                          else{
                              if(savedClicks[ele[i].value] &gt; 1){
                                  clearBar();
                                  ctx.rect(335, 310-(height/2), 30, height);
                                  ctx.lineWidth = 0;
                                  ctx.stroke();
                              }                    
                              if(savedClicks[ele[i].value] === 1){
                                ctx.rect(335, 310, 30, 40);
                                ctx.lineWidth = 1;
                                ctx.stroke();
                              }                           
                          }
                      }
                  }
                  ctx.closePath();
              }
              function clearBar(){
                  var c = document.getElementById(&quot;myCanvas&quot;);
                  var ctx = c.getContext(&quot;2d&quot;); 
                  ctx.clearRect(0, 0, c.width, c.height);
                  init();
              }
              function clearCanvas(){
                  var c = document.getElementById(&quot;myCanvas&quot;);
                  var ctx = c.getContext(&quot;2d&quot;); 
                  ctx.clearRect(0, 0, c.width, c.height);
                  localStorage.clear(); 
                  init();    
              }
      &lt;/script&gt;  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/CqYn5.png" rel="nofollow noreferrer">Here is the image photo</a>
  Thanks in advance!</p>