title: Delete a vertical line worth of pixels
body: <p>I am trying to delete a vertical line that is 10 px in width and the height of the image.I am using a canvas.
  I cannot post this to jsfiddle because i cannot load the image.</p>
  
  <pre><code>var canvas = document.createElement("canvas");
  
  canvas.height = 200;
  canvas.width = 200;
  Caman(canvas, "studipo.jpg", function () {
       var base64encoded = GetResizedImage(canvas, 200, 200, 200, 160);       
  });
  
  
  function GetResizedImage(canvas, width, height, croppingWidth, croppingheight) {
  var ctx = canvas.getContext("2d");
  
  var oldid = ctx.getImageData(0, 0, width, height);
  
  var newCanvas = document.createElement("canvas");
  
  newCanvas.width = croppingWidth;
  
  newCanvas.height = croppingheight;
  
  var newContext2d = newCanvas.getContext("2d");
  
  var vnewid = newContext2d.createImageData(width, height);
  
  var oldArray = Array.from(oldid.data);
  
  console.log(oldArray);
  
  var arrayToInsert = [];
  
  
  for (var y = 0; y &lt; height; ++y) {
      for (var x = 0; x &lt; width; ++x) {
          if (y &gt; 90 &amp;&amp; y &lt; 130) { // this is how we remove a horizontal line worth of 20 pixels in width. 
  
          }
          else {
              var index = (y * width + x) * 4; // index of the current pixel                       
              arrayToInsert.push(oldArray[index]);
              arrayToInsert.push(oldArray[index + 1]);
              arrayToInsert.push(oldArray[index + 2]);
              arrayToInsert.push(oldArray[index + 3]);
          }
      }
  }
  
  for (var i = 0; i &lt; 200; i = i + 1) {
  
  
      for (var j = 0; j &lt; 160; j++) {
          var index = (i * width + j) * 4;
          if (j &lt; 80 &amp;&amp; j &gt; 70) {
  
              // this draw a vertical line of pixels that have (0,0,0,0) in rgb+a in the middle of the image.
              arrayToInsert[index] = 0;
              arrayToInsert[index + 1] = 0;
              arrayToInsert[index + 2] = 0;
              arrayToInsert[index + 3] = 0
  
  
              //   uncomment this.
              //   arrayToInsert.splice (index, 4); 
              //   this does not work for some reason, but it should
  
          }
      }
  }
  
  vnewid.data.set(arrayToInsert);
  newContext2d.putImageData(vnewid, 0, 0, 0, 0, 200, 160);
  
  var newC = newCanvas.toDataURL();
  console.log(newC);
  
  // take this console.log base64 encoded image and put it here.
  
  // https://codebeautify.org/base64-to-image-converter
  
  }
  </code></pre>
  
  <p>At this line here.</p>
  
  <pre><code>                arrayToInsert[index] = 0;
                  arrayToInsert[index + 1] = 0;
                  arrayToInsert[index + 2] = 0;
                  arrayToInsert[index + 3] = 0;
  </code></pre>
  
  <p>I can draw a line a vertical line with this.However if i try to remove those pixels altogether, the image data gets corrupted and it makes no sense and i do not understand why.</p>
  
  <pre><code>arrayToInsert.splice (index, 4); 
  </code></pre>
  
  <p>Instead of making all those pixels ( 0 0 0 0 ), i would like to remove them so that the image is cropped.</p>
  
  <p>Here is the link to 3 files ( a html, the photo used and the js.)</p>
  
  <p><a href="https://drive.google.com/open?id=0B06HbozeqdkZXzNDUTJKelVZMmc" rel="nofollow noreferrer">https://drive.google.com/open?id=0B06HbozeqdkZXzNDUTJKelVZMmc</a></p>
  
  <p>Note: I want to crop in the middle of the image, not on the edge of the image.</p>
  
  <p>Like this cake here.</p>
  
  <p><a href="http://static2.businessinsider.com/image/57ee8fa7dd0895e5358b4d30-907/cutting%20cake%20into%20rectangles%202%20skitch.jpg" rel="nofollow noreferrer">http://static2.businessinsider.com/image/57ee8fa7dd0895e5358b4d30-907/cutting%20cake%20into%20rectangles%202%20skitch.jpg</a></p>
  
  <p>I would cut a rectangle the i would press the 2 parts of the cake into each other, so it becomes a single cake, except with a cropped out rectangle in the middle.</p>