0

I'm working on some code I'm unfamiliar with, and trying to troubleshoot a strange bug. Essentially there are different sections to the canvas, and the goal is to calculate the percentage of the section that's filled. There are two different colors (red and yellow, with specific RGB and Hex values) that could be used to draw a line in the section, used like a brush stroke. When I draw over the entire section in a single color, the % of section filled shows correctly at 100%. However, if I go back over and draw a line of the other color into the section, a small number of pixels are neither of the specific RGB values and so the % turns to 99%. When I used an image viewer and blew up the image, I could see that the bulk of the drawn line is fine, but the outer edges are gradient-like that fade into the other color.

section image

pixelated image boundary

This is the code used to draw onto the canvas:

handleMouseMove() {
    const canvas = this.props.canvasInfo;
    const context = canvas.getContext('2d');

    if (!(this.props.canvasObject && context && this.image)) {
      setCanvasError(this.props.dispatch, Constants.CANVAS_GENERIC_ERROR);
      return;
    }
    const { isDrawing, mode, brushSize, brushColor } = this.props.canvasObject;

    if (isDrawing && mode && brushSize && brushColor) {
      context.strokeStyle = brushColor;
      context.lineJoin = 'round';
      context.lineWidth = brushSize;
      context.globalCompositeOperation = 'source-over';
      if (mode === Constants.ERASER_MODE) {
        context.strokeStyle = Constants.CANVAS_BACKGROUND_COLOR;
      }
      context.beginPath();

      const localPos = {
        x: this.lastPointerPosition.x - this.image.x(),
        y: this.lastPointerPosition.y - this.image.y(),
      };
      context.moveTo(localPos.x, localPos.y);

      const stage = this.image.getStage();
      const pos = stage.getPointerPosition();
      localPos.x = pos.x - this.image.x();
      localPos.y = pos.y - this.image.y();

      context.lineTo(localPos.x, localPos.y);
      context.closePath();
      context.stroke();
      this.lastPointerPosition = pos;
      this.image.getLayer().draw();
    }

I'm not sure why the pixels aren't all just either of the two specified colors. I saw at html 5 canvas LineTo() line color issues that this could be antialiasing, but I'm not sure how to fix it.

user1779418
  • 455
  • 1
  • 7
  • 22
  • This may be a duplicate of [this question](https://stackoverflow.com/questions/195262/can-i-turn-off-antialiasing-on-an-html-canvas-element) – bmceldowney Jan 13 '20 at 17:58
  • @bmceldowney the answer of using context.imageSmoothingEnabled= false did not solve my issue, and I cannot use algorithms to paint the other pixels a specific color because there's no telling if it should be red or yellow painted. – user1779418 Jan 14 '20 at 13:24
  • Yes, @user1779418, the answer is that there is no easy way to do this without painting pixels yourself using [the algorithm linked in the answer](https://en.wikipedia.org/wiki/Bresenham%27s_line_algorithm). You could also try to define a color hue threshold at the midpoint between your red and yellow colors and determine that a pixel is yellow if it is above the threshold and red if below. That might be an easier solution. – bmceldowney Jan 14 '20 at 20:26

0 Answers0