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

September 05, 2022 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>
<link  type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="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 context
    var 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 mouse
    var isDown=false;

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


    function handleMouseDown(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;
    }

    function handleMouseUp(e){
      e.preventDefault();
      e.stopPropagation();

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

    function handleMouseOut(e){
      e.preventDefault();
      e.stopPropagation();

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

    function handleMouseMove(e){
      e.preventDefault();
      e.stopPropagation();

      // if we're not dragging, just return
      if(!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 position
      var 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>
    <canvas id="canvas" width=300 height=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/

Baca Juga

Solution 3:

Using this function you can get the mousecoordinates

  function getMousePos(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.

Html5 Dictionary

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?"