0

I want to draw I line between two points that is pixelated, eg

line

Whats the most efficient way to do this?

I could just draw a bunch of rectangles based off of calculations but that sounds like it would be very expensive, is there some faster way to do this?

Maybe a way to customize ctx.strokestyle?

eg:

ctx.strokeStyle = "pixelated";

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(100, 100);
ctx.stroke();

Edit: I am not trying to achieve crisp rendering, I have already done that, the image is blurry because I just got it from a google search

I am asking how to draw a line that is pixelated rather than a normal line

Dr. Slate
  • 31
  • 4
  • MDN: [Crisp pixel art look with image-rendering](//developer.mozilla.org/docs/Games/Techniques/Crisp_pixel_art_look). – Sebastian Simon Aug 17 '21 at 01:22
  • 1
    [Duplicate](//google.com/search?q=site:stackoverflow.com+js+canvas+pixelated+line) of [Can I turn off antialiasing on an HTML element?](/q/195262/4642212). – Sebastian Simon Aug 17 '21 at 01:23
  • 1
    The problem isn't achieving crisp rendering, its how to draw a line to be pixelated rather than just a normal line – Dr. Slate Aug 17 '21 at 01:24
  • 2
    [Bresenham](https://en.wikipedia.org/wiki/Bresenham's_line_algorithm) is the standard "pixelated line" drawing algorithm. You can do that either by drawing lots of 1px-rectangles or by manipulating the image data directly, probably not much of a difference. – Bergi Aug 17 '21 at 01:30
  • The answer you are looking for https://stackoverflow.com/a/50625904/3877726 draws pixel art line using a variation of error diffusion. (bresingham) optimized for Canvas 2D API without security limitations. – Blindman67 Aug 17 '21 at 05:24

0 Answers0