How to draw vertical lines on canvas directly with ImageData?

Question

I don't understand why the lines are diagonal and unevenly dotted. I'm trying to draw straight vertical lines.

'use strict';

function loadImage(url) {
  return new Promise(r => { let i = new Image(); i.onload = (() => r(i)); i.src = url; });
}

(async () => {
  const canvas = document.querySelector('canvas');
  const context = canvas.getContext('2d');
  const image = await loadImage("data:image/png;base64,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");
  canvas.width = image.width;
  canvas.height = image.height;
  context.drawImage(image, 0, 0);

  const imageData = context.getImageData(0, 0, canvas.width, canvas.height);

  for (let i = 0; i < image.width * 4; i += 4) {
    for (let j = 0; j < image.height * 4; j += 4) {
      imageData.data[(i * j) + 0] = 0;
      imageData.data[(i * j) + 1] = 0;
      imageData.data[(i * j) + 2] = 0;
      imageData.data[(i * j) + 3] = 255;
    }
  }

  context.putImageData(imageData, 0, 0);
})();

html {
        background: yellow;
      }

      * { 
        margin: 0;
        padding: 0;
      }

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <canvas></canvas>
  </body>
</html>

remember: vertical lines start at some pixel's RGBA channels starting at `x`, then the next pixel to color is the RGBA values on `x + width*4` (because it's a clamped int array with 4 entries per pixel so one row is `width*4` values), then on `x + width*4 * 2` for the next line, then times three for the line after that, times four, five, etc. — Mike 'Pomax' Kamermans, Oct 28 '20 at 00:50

score 0 · Answer 1 · answered Oct 28 '20 at 00:59

'use strict';

function loadImage(url) {
  return new Promise(r => { let i = new Image(); i.onload = (() => r(i)); i.src = url; });
}

(async () => {
  const canvas = document.querySelector('canvas');
  const context = canvas.getContext('2d');
  const image = await loadImage("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC8AAABACAYAAACKhS4jAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAARAQAAEQEB5G+qfQAAABh0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMS4xYyqcSwAAB2hJREFUaEPVmn90TnUcx+9zn+fZj+wHU2ZrypKxZShlHZstpRUnTgpRYc38qqQRNYbFpnKO0DlZHDp+dJZCZUWaVp3ldIYi46SfLGxziIQxs7x7f77XY4+5qf/u1/uc19k9233f8/48+/5+rmGa5s+GYSwgQeTaUkhISEVcXBx4uZt0Vr+8hvRmdna2hBfqyCRikmtCQyV8Tk4OXC4XPG63FFFKYtRfNVebFi1aYPjQIcgZOQzvvDIDbaOjpIDjZLC6Q2O5SOXYxx7Bt6uXKbasKMTA9F7gH6SIlSRMbtRVq5I6d8KeDWsuFSAseHECIsLDpID9pKe6U0ONuS44CD+XlVwWXti8ZAFSu3WVAhrIHOIVg05KIChesRR7NxdfUcB2MnXUcAQFBkgR20kHMekiNzmWO+FZVFV8i10fFV1RgLBufgES2sVKAafJo2LURevTU5NRvWcHDu4ox851q+wLeL1Awgs1pKUYddALLZuH49Cu7VYBO7eiovi9K8I/0CMJNzP8jVYBqy2r87qb4Iu1RSq8j33ffMlRaK1q92MHPwxOvdhINlnhBS3mgkBydkDve7BkTh5KV6/EzpJPsOXD9/DG9Cno3ike7BgoJEysGGOFP0oi5QFOaznxfaKXkMkqlZQT/uISJ8kthPesJ46rGfmxOwPtJF8Tjov4k/iH9ucrIk2JvhHqCQ6rG6mfa5rgSs02cFOeJ/SwRj0Wcy+yA2BHSIht2KbUEs5avDQ+I7JWclQyaX0Zz+VxbUSEbeCmSH+QDk3fOPUEh9WGHB8r4Zs3tw3clKmEnlOknTzAaQ2WkaY4Ph4ICLAN7A+3YeA+kpdGGdFiN7b8Bnbemh49/lcHllEqgNA30bI7q1Dy64NsPhekAL+g/0Y+oecMiZcHOC1ZOpxf0K0bkJBgG9if8+QuQs9WIp3fcc0IYrOpGDQIiIqyDe3PDySI0Jdr2Z2Vh2xJ5NhfN3o08D/mgHmEnnOkqzzAacWSv56LiwOysgCPxza0D+4bwY0vL41dhP3YeT0pa5lNDz0EDBhgG9qfXwkXTLxU+18tVNTa68WR8eOBlBTb0P7IMpoe9mMjSbkdVnNS2S86Ghdyc4GOHW1D+7hA0gk9e0mwPMBpyTlOQ2HPnsDUqUDr1rbBfRwg4YSe+cqtgfKv4+y7NzMTyM7+zxGIOx3+UOc/acrtsOQAausdXLidy8kBRo266ggkzac/oWcfkZnbcbUnpyZ36QLk5QEyiV1lDVRDrif0LFFuDZQpw2epBJcCevWyDe5jDaGH/wijr3I7LNk9rY0JDsaxiROBmTOBxETb4D4eJ/RUkQh5gNOS07NDA2NjrfDTpgExMbbBhWMkmtBTpNwa6D7y97L0dKv5TJoEhIXZhhfk8OridwCDlFsDzQ3liPPLuHFWAbKI42zcNLiP0YQebQ6uZAG2I6lVK5yX2dc3AjUJ7UMOrrja46UeB1ci2UGdye3e3QovpKXZhhf8Dq4ylFsDjfNwvP/6iSes8NKJr7IL44aXP4wT5CbldlgyfBa3bdYMJyZPtgq4yhqIG17w38VL4/OLXsfVitQ83r59Y/ORNRALahpe2Ea4XeOl8axya6AHyYV3+vRpLGDkSMDtti1gBuH98rWRLDu00MJwDp/7n366sYB+/WzD15M7CD3fEC1OHuSNkoqUyEg0+IZPQY5S/IL72E3koJeel5RbAyWSullJSY3hp08H2rSxLeA1IveT28WsgyZ4OXyW+4ZPQZYQNpsYOXlIJvTIyVsn5XZYcvi6qR3DnvINn0JGhu0eINcKL5QTLdp/FDmaIWc/vvBC796XBS8jcmQyMN2E16MKeF65NRB3gwbe79u3MbzMwB06qM76FJEvKvokuVD1qReTM9U7QHLu31bMOqgwgsPnBg6f3zN8KZk3ZQrCQkNxS5SBhVkGfl9homa9B1UlAegQ65ICtPjaSCSf4tmoqEjkzZyOhfNfxoYPZuG7zzJRvd6LAytN7F/iwsEiE4c3ePHpIi9MUzWf4cqtgcZ72J5LS1LRcHoOzh0rwNmqfPy5LQ1Va934/W0XKpey6axx40iJF4/0NiX8HsvqvKQJvB8ZaeLg/gycP1mAc0fyceZAHo58Ho1Dq92o5Kd/YLmJ6o88SO6imo7ALbAeklfAfkzuEYq6kzmoP1GAusP5OPXTGNQUs/msYvNZ7ELZPBNuNpuEFuo1yj/I9WLWQbeR0+OfuRUNtQWol+ZTnY/j5Xeiep0bW+a60DHGQOeIeOwdVIbwAPXqGNdw+miIy2Vg8aJ0HK7MR+We2di2eRL6p7oR6LWC7xtSjponv0f/m9MlvLxxpZXmm6aJESNGcOjPw+yXZ2FY8hAsS52H2qd+Q0PWQVQO3YoXOo+V8LWWRR9JB85qxs3K29mFqH/3D/w9rUaF9rH94Y3IThwt4WXS0lKvBroD8e69iy4LfnTYbsy+cwpaBbeU8B9bt+onWYQt5L8B98ek4a2U17Ao5RV0bXmbhJYzTnk9TJvR5t8kJ3AbycmLrCEX1/eG8Q/qYAYCMbwJ2QAAAABJRU5ErkJggg==");
  canvas.width = image.width;
  canvas.height = image.height;
  context.drawImage(image, 0, 0);

  const imageData = context.getImageData(0, 0, canvas.width, canvas.height);

  for (let x = 0; x < canvas.height * 4; x += 1) {
    for (let y = 0; y < canvas.width * 4; y += 4 * 10) {
      const i = y + canvas.width * 4 * x;
      imageData.data[i + 0] = 0;
      imageData.data[i + 1] = 0;
      imageData.data[i + 2] = 0;
      imageData.data[i + 3] = 255;
    }
  }

  context.putImageData(imageData, 0, 0);
})();

html {
        background: yellow;
      }

      * { 
        margin: 0;
        padding: 0;
      }

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <canvas></canvas>
  </body>
</html>

How to draw vertical lines on canvas directly with ImageData?

1 Answers1