Hello, I want to ask the question why my object disappears when I go beyond the canvas , and why the rectangle is not drawn correctly when the mouse is moved. I attach the code:

 $(document).ready(function() { var $canvas = $('canvas'); var rect = {}; var drawing = false; var trigger = $('.rect'); function _makeRect() { var startX = $('.coordinate_x').val(); var startY = $('.coordinate_y').val(); var width = $('.rect_width').val(); var height = $('.rect_width').val(); $canvas.drawRect({ fillStyle: '#000', draggable: true, fromCenter: false, x: startX, y: startY, width: width, height: height }); console.log(startX, startY, width, height); } $('.make_rect').on('click', _makeRect); $canvas.on('mousedown', _mousedown); $canvas.on('mouseup', _mouseup); $canvas.on('mousemove', _drawing); function _mousedown(e) { drawing = true; var startX = e.pageX - $canvas.offset().left; var startY = e.pageY - $canvas.offset().top; rect.x = startX; rect.y = startY; } function _mouseup(e) { drawing = false; } function _drawing(e) { var currentX = e.pageX - $canvas.offset().left; var currentY = e.pageY - $canvas.offset().top; if(drawing) { $canvas.drawRect({ fillStyle: '#000', layer: true, name: 'box', fromCenter: false, x: rect.x, y: rect.y, width: currentX - rect.x, height: currentY - rect.y }); } } });
  • var height = $('.rect_width').val(); Let's start with the fact that there is a mistake. Appeals to the wrong field. In addition, it would be useful for you to attach a link to jsfiddle.net for example - it will be easier and faster to help you (well, or at least attach your own html). - alexoander
  • in html everything is simple there is only the canvas tag, and the buttons - Konstantin Kudelko
  • and why is it not to that field?) - Konstantin Kudelko
  • aa =) I understood you - I just looked on to draw not only squares, but generally "square figures." I apologize =) - alexoander
  • thunders.rpr.by Here you can see the problem - Konstantin Kudelko

1 answer 1

I can tell only part of the answer.

why the rectangle is not drawn correctly when moving the mouse.

Because you constantly draw your rectangle. The solution is quite simple - you just need to change the logic to the following:

  1. Click the button -> drawing = true -> mouseDown event;
  2. when moving in the if (drawing) block, you need to save the current X and Y values ​​(for example, lastX and lastY) -> the mouseMove event;
  3. Let's release the mouse button - drawing = false and the mouseUp event is triggered. In it, we need to add rendering logic using the lastX and LastY saved values ​​(well, startX and startY) and then clear them for further use;

What we get in the end: When mousedown - filled values ​​of StartX and StartY, MouseMove - filled values ​​of LastX and LastY. On mouseUp, all 4 variables for drawing a shape. However, this solution is not perfect - maybe you want to see the rectangle itself while drawing.

  • I have to see a rectangle when drawing too - Konstantin Kudelko
  • There is a suggestion to use layers so that during drawing a “temporary” layer is created on top of the current one with an opacity of 0.1 and an object with constant canvas cleaning is drawn on it (not a very solution, but the first thing that came to mind). After we decided to leave the shape - we transfer the coordinates to the main layer, draw the object and delete the drawing layer. To simplify these processes, you can try using fabric.js - there it can be done much easier - alexoander