Draw a rectangle continuously at the mouse position on the canvas while holding down the mouse

llama ass

I'm trying to make a drawing program using javascript and HTML canvas and need to draw a circle continuously at the mouse's position, but I'm not sure how to do this. I have a general idea, but my code (not surprisingly) doesn't work. Any idea how to make it work? The code is here.

<canvas width = '450' height = '450' id = 'drawing'> </canvas>
<script>
  var canvas = document.getElementById('drawing');
  var ctx = canvas.getContext('2d')
  var drawing = false
  function startmoving(){ drawing = true;}
  function stopmoving() { drawing = false;}

  function draw() {
    if (drawing == true){
      ctx.fillstyle = 'black';
      ctx.fillRect(event.clientX, event.clientY, 4, 4)
    }
    setInterval(drawing, 10);
  }
</script>

Reality

You need to set mousedown/mouseup and mousemove listeners for the canvas, if the mouse is down, make and place a rectangle at the coordinates, if the mouse is up, stop drawing. Also, clientX and clientY are used for the upper left visible part of the page. pageX and pageY are at the top left of the page. So if you scroll down with clientX and clientY, it will draw at the position of the current page, making it look weird. solve it? Use pageX and pageY (replace clientX and clientY with pageX and pageY)!

<!DOCTYPE html>
<html>

<body>
  <canvas width='450' height='450' id='drawing'> </canvas>
  <script>
    var canvas = document.getElementById('drawing');
    var drawing = false;
    //start the drawing if the mouse is down
    canvas.addEventListener('mousedown', () => {
      drawing = true;
    })
    //stop the drawing if the mouse is up
    canvas.addEventListener('mouseup', () => {
      drawing = false;
    });
    //add an event listener to the canvas for when the user moves the mouse over it and the mouse is down
    canvas.addEventListener('mousemove', (event) => {
      var ctx = canvas.getContext('2d');
      //if the drawing mode is true (if the mouse button is down)
      if (drawing == true) {
        //make a black rectangle
        ctx.fillstyle = 'black';
        //put the rectangle on the canvas at the coordinates of the mouse
        ctx.fillRect(event.clientX, event.clientY, 4, 4)
      }
    });
  </script>
</body>

</html>

Related

Draw SDL/c++ while holding down the mouse button

mahi_nick I'm new to SDL and I'm having a problem now. Well, I'm going to make a program like Paint. In order to do this, I need a mouse command that, when I hold down the left mouse button and move the mouse, draws a line where the mouse moves. I found an eve

Draw a rectangle with the mouse while maintaining a given scale

floodlight I have a problem that I think is a basic problem and I have to scratch my head. I want to be able to draw a rectangle on my form while constraining it to a given scale. Similar to how Photoshop's crop tool works. I can scale the image correctly usin

Draw a rectangle with the mouse while maintaining a given scale

floodlight I have a problem that I think is a basic problem and I have to scratch my head. I want to be able to draw a rectangle on my form while constraining it to a given scale. Similar to how Photoshop's crop tool works. I can scale the image correctly usin

Tkinter: draw rectangle with mouse

User 4772964 Please help me to solve this problem. I want to allow the user to use the mouse to draw random rectangles around a specific area of interest in the picture (by clicking the right or left button of the mouse until he releases it). I'm dealing with

Tkinter: draw rectangle with mouse

User 4772964 Please help me to solve this problem. I want to allow the user to use the mouse to draw random rectangles around a specific area of interest in the picture (by clicking the right or left button of the mouse until he releases it). I'm dealing with

Tkinter: draw rectangle with mouse

User 4772964 Please help me to solve this problem. I want to allow the user to use the mouse to draw random rectangles around a specific area of interest in the picture (by clicking the right or left button of the mouse until he releases it). I'm dealing with

Draw a rectangle with mouse in GLUT

Garrett Bates I'm fairly new to using GLUT and I've been trying to compile a program (I found here , this is the first response) that uses the mouse to draw rectangles by recording the start and end points of clicks and drags. As a clean copy/paste it will com

Draw rectangle (div) with mouse

Tamas Papp I am trying to draw a rectangle (div) using mouse events. Here is my code: http://jsbin.com/apediti/2/edit Basically, I am doing the following: After mousedownI save the mouse coordinates, create a new div with a size: , width=0, height=0and bind ev

Tkinter: draw rectangle with mouse

User 4772964 Please help me to solve this problem. I want to allow the user to use the mouse to draw random rectangles around a specific area of interest in the picture (by clicking the right or left button of the mouse until he releases it). I'm dealing with

Tkinter: draw rectangle with mouse

User 4772964 Please help me to solve this problem. I want to allow the user to use the mouse to draw random rectangles around a specific area of interest in the picture (by clicking the right or left button of the mouse until he releases it). I'm dealing with

Charge energy and release it while holding down the mouse button

Bybrusco I need to accumulate a certain amount of energy and then release it when the mouse button is released. Now, when the energy level reaches its maximum value, the energy level is set to 0 and the function starts accumulating again from the beginning, cr