How to paint in canvas holding the mouse and not clicking-CodePudding

So here's the code:

HTML:

<canvas id="gameCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

JS:

var canvas = document.getElementById("gameCanvas");
var ctx = canvas.getContext("2d");


canvas.addEventListener("click", function (evt) {
    var mousePos = getMousePos(canvas, evt);
    ctx.beginPath();
ctx.arc(evt.x, evt.y, 50, 0, 2 * Math.PI);
ctx.stroke();
}, false); 

function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
        x: evt.clientX - rect.left,
        y: evt.clientY - rect.top
    };
}

The problem i'm having is when i try to paint, it paints on the canvas when i'm clicking, but what i want is that it paints when i'm holding my finger on the canvas.

Edit: what i want is to make a paint tool, i want that when i'm dragging to draw in the canvas it draws. But in my code it draws when i'm clicking. I'm using a touchscreen so it needs to work for mobile and pc.

When i'm holding in the canvas and then drag it dosn't continue drawing

CodePudding user response：

// object to store mouse position reading
var mousePosition = {
  x: 0,
  y: 0
};

function onm ouseMove(event) {
   // detect possible changes in mouse position
   if (mousePosition.x != event.clientX  || mousePosition.y != event.clientY ) {
      mousePosition.x = event.clientX;
      mousePosition.y = event.clientY;
    // code to draw goes here ....
  }
}

// use mouse move event on the canvas
canvas.addEventListener("mousemove", onm ouseMove);

additionally, one could set an interval inside the onm ouseMove if clause to space out drawing steps.

CodePudding user response：

Click events trigger once per click and any data you extract from the event pertains to that instant. As the first answer states, mousemove is the event you want to look into.

I've made a working implementation below that I think does what you are after, it uses three event listeners mousedown sets a boolean to enable drawing, mousemove triggers drawing and updates continously, mouseup toggles the boolean set by mousedown to prevent drawing unless you're golding the mouse down while moving the mouse.

I reduced the radius of your circle as I'm not sure exactly what you're trying to draw, it now traces the mouse.

const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");

let mouseDown = false;
let mouseUp = true;

canvas.addEventListener('mousedown', (event) => {
  mouseDown = !mouseDown; // toggle mouseDown true/false;      
});

canvas.addEventListener('mousemove', (event) => {
  if (mouseDown) {
  redraw(event.clientX, event.clientY);
  }
});

canvas.addEventListener('mouseup', (event) => {
  mouseDown = !mouseDown; // toggle mouseDown true/false;
});


function redraw(X,Y) {

  // console.log(X, Y);
  ctx.beginPath();
  ctx.arc(X, Y, 2, 0, 2 * Math.PI, false);
  ctx.stroke();  
}

<canvas id="gameCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

CodePudding user response：

Side remark: mousePos is not used in the original code, that's why it probably draws into a shifted position. MouseEvent has offsetX and offsetY, you could use them directly instead of any extra calculations.

If you just want to draw whenever the user moves the mouse over the canvas, regardless of pushing or not pushing a button, mousemove is the event you could use:

<canvas id="gameCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>

<script>
  let canvas = document.getElementById("gameCanvas");
  let ctx = canvas.getContext("2d");

  canvas.addEventListener("mousemove", function(evt) {
    ctx.beginPath();
    ctx.arc(evt.offsetX, evt.offsetY, 5, 0, 2 * Math.PI);
    ctx.stroke();
  });
  canvas.addEventListener("touchmove", function(evt) {
    ctx.beginPath();
    ctx.arc(evt.offsetX, evt.offsetY, 5, 0, 2 * Math.PI);
    ctx.stroke();
  });
</script>

If you want something to happen even when the mouse is not moving, just it's over the canvas, some kind of timer is needed. Here it's just a simple requestAnimationFrame(), which is enough for a simple test:

<canvas id="gameCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>

<script>
  let canvas = document.getElementById("gameCanvas");
  let ctx = canvas.getContext("2d");

  let lastevent = false;
  let r = 0;

  function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    if (lastevent) {
      ctx.strokeStyle = "rgb("   r   ",0,0)";
      r  = 8;
      if (r > 255) r = 0;
      ctx.beginPath();
      ctx.arc(lastevent.offsetX, lastevent.offsetY, 5, 0, 2 * Math.PI);
      ctx.stroke();
      requestAnimationFrame(animate);
    }
  }
  canvas.addEventListener("mousemove", function(evt) {
    lastevent = evt;
  });
  canvas.addEventListener("mouseover", function(evt) {
    lastevent = evt;
    animate();
  });
  canvas.addEventListener("mouseout", function(evt) {
    lastevent = false;
  });
</script>