How To Draw A Rectangle On Canvas Like We Do On Paint?

July 28, 2023 Post a Comment

Say i want to draw a rectangle on canvas. I want to be able to get the co-ordinates from user's mouse. Ideal scenario is user clicks at a point and drags down to another end like t

Solution 1:

Here's a outline of how to drag-draw a rectangle on canvas:

In mousedown:

save the starting mouse position
set a flag indicating the drag has begun

In mousemove:

clear the canvas of the previous rectangle
calculate the rectangle width/height based on the starting vs current mouse position
draw a rectangle from the starting XY to the current mouse position

In mouseup:

clear the dragging flag because the drag is over

Here's example code and a Demo: http://jsfiddle.net/m1erickson/6E2yd/

<!doctype html><html><head><linktype="text/css"media="all"href="css/reset.css" /><!-- reset css --><scripttype="text/javascript"src="http://code.jquery.com/jquery.min.js"></script><style>body{ background-color: ivory; }
    #canvas{border:1px solid red;}
</style><script>
$(function(){

    // get references to the canvas and contextvar canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // style the context
    ctx.strokeStyle = "blue";
    ctx.lineWidth=3;

    // calculate where the canvas is on the window// (used to help calculate mouseX/mouseY)var $canvas=$("#canvas");
    var canvasOffset=$canvas.offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;
    var scrollX=$canvas.scrollLeft();
    var scrollY=$canvas.scrollTop();

    // this flage is true when the user is dragging the mousevar isDown=false;

    // these vars will hold the starting mouse positionvar startX;
    var startY;


    functionhandleMouseDown(e){
      e.preventDefault();
      e.stopPropagation();

      // save the starting x/y of the rectangle
      startX=parseInt(e.clientX-offsetX);
      startY=parseInt(e.clientY-offsetY);

      // set a flag indicating the drag has begun
      isDown=true;
    }

    functionhandleMouseUp(e){
      e.preventDefault();
      e.stopPropagation();

      // the drag is over, clear the dragging flag
      isDown=false;
    }

    functionhandleMouseOut(e){
      e.preventDefault();
      e.stopPropagation();

      // the drag is over, clear the dragging flag
      isDown=false;
    }

    functionhandleMouseMove(e){
      e.preventDefault();
      e.stopPropagation();

      // if we're not dragging, just returnif(!isDown){return;}

      // get the current mouse position
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      // Put your mousemove stuff here// clear the canvas
      ctx.clearRect(0,0,canvas.width,canvas.height);

      // calculate the rectangle width/height based// on starting vs current mouse positionvar width=mouseX-startX;
      var height=mouseY-startY;

      // draw a new rect from the start position // to the current mouse position
      ctx.strokeRect(startX,startY,width,height);

    }

    // listen for mouse events
    $("#canvas").mousedown(function(e){handleMouseDown(e);});
    $("#canvas").mousemove(function(e){handleMouseMove(e);});
    $("#canvas").mouseup(function(e){handleMouseUp(e);});
    $("#canvas").mouseout(function(e){handleMouseOut(e);});

}); // end $(function(){});</script></head><body><h4>Drag the mouse to create a rectangle</h4><canvasid="canvas"width=300height=300></canvas></body></html>

clear the

Solution 2:

See this, move you mouse over the square, and witness the awesomeness of Process.js

http://processingjs.org/learning/topic/pattern/

Solution 3:

Using this function you can get the mousecoordinates

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

this function takes in the canvas object and the event. Now you just have to add an eventHandler on mousedown and mouseup and you can get both the locations.

var canvas = document.getElementById('canvasId');
var ctx = canvas.getContext('2d');

var locA, locB;

document.addEventListener('mousedown', function(e) {
     e.preventDefault();
     locA = getMousePos(canvas, e);
});

document.addEventListener('mouseup', function(e) {
     e.preventDefault();
     locB = getMousePos(canvas, e);

     ctx.fillStyle = '#000000';
     ctx.fillRect(locA.x, locA.y, (locB.x - locA.x), (locB.y - locA.y));
});

function source: http://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/

There are still some problems surrounding canvas coordinates vs document coordinates, but I'm sure you'll be able to fix that.

javascript spravka

How To Draw A Rectangle On Canvas Like We Do On Paint?

Solution 1:

Solution 2:

Solution 3:

Post a Comment for "How To Draw A Rectangle On Canvas Like We Do On Paint?"