1

I'm writing a webapp to draw a segmentation map which will then be used as input into a neural network to generate a realistic looking image. For a better picture, I use a mapping from the 150 segmentation classes (labeled 1 through 150, single channel) to RGB so that they aren't drawing in hard-to-distinguish black and white colors. I use a few dictionaries for the forward and backward mappings.

My problem is that when I use the following code to draw lines, the canvas seems to add/multiply colors instead of use the exact stroke color I'm using, causing a keyerror in my python backend.

ctx.beginPath();
ctx.lineWidth = size;
ctx.lineJoin = "round";
ctx.lineCap = "round";
ctx.moveTo(lastx, lasty);
ctx.lineTo(x, y);
ctx.closePath();
ctx.stroke();

Here is an image of my tool, and an example of my drawing a single line (the green trail on the olive background). The starting image is drawn with fill rect, by the way.

Example image:

I've verified that there is no issues if I just draw rectangles with ctx.fillRect(Math.round(x-size/2), Math.round(y-size/2), size, size), but of course it's not as pretty.

Both the fill and stroke color are the same. I've tried all combinations of lineJoin and lineCap for the line drawing. https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors has helpful information, but doesn't offer a solution to never draw the "half" pixels. Is there a setting I'm overlooking?

Helder Sepulveda
  • 15,500
  • 4
  • 29
  • 56
Skylar Wurster
  • 11
  • 1
  • On your sample image, I can not see any color difference... can you provide a: https://stackoverflow.com/help/minimal-reproducible-example – Helder Sepulveda Apr 11 '20 at 21:09
  • If you're using `const ctx = canvas.getContext('2d')` then you shouldn't tag your question with `webgl`. That's a completely different api. – zoran404 Apr 12 '20 at 14:34
  • Precisely, the color difference is negligible, but it is not the exact color. Here is a zoomed in example: https://imgur.com/a/yeOASRb. You can see that it blends on the edges that aren't perfectly on the pixel. @HelderSepulveda – Skylar Wurster Apr 14 '20 at 15:51
  • Did the `ctx.imageSmoothingEnabled= false` fixed it? – Helder Sepulveda Apr 14 '20 at 16:01
  • @HelderSepulveda unfortunately, no :( – Skylar Wurster Apr 15 '20 at 14:20
  • This post has been officially closed as a duplicate and the answer it links to is the `imageSmoothingEnabled` maybe close this question and ask a new one? ...and if you do please include working code to reproduce: https://stackoverflow.com/help/minimal-reproducible-example – Helder Sepulveda Apr 15 '20 at 14:42

0 Answers0