Draw a rectangle on a image inside a canvas using mousemove event in javascript

Question

I am trying to draw a rectangle on an image that is inside canvas using mousemove event . But i am getting rectangle on the image with color filled in the rectangle because of clearRect . can anyone figure me out . how to draw a rectangle with just a border on the image . Below is the code that i followed to achieve it .

var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),
    rect = {},
    drag = false;
	function init() {
		var imageObj = new Image();

      imageObj.onload = function() {
        ctx.drawImage(imageObj, 0, 0);
      };
      imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
	  canvas.addEventListener('mousedown', mouseDown, false);
	  canvas.addEventListener('mouseup', mouseUp, false);
	  canvas.addEventListener('mousemove', mouseMove, false);
	}
	function mouseDown(e) {
	  rect.startX = e.pageX - this.offsetLeft;
	  rect.startY = e.pageY - this.offsetTop;
	  drag = true;
	}
	function mouseUp() {
	  drag = false;
	}
	function mouseMove(e) {
	  if (drag) {
		rect.w = (e.pageX - this.offsetLeft) - rect.startX;
		rect.h = (e.pageY - this.offsetTop) - rect.startY ;
		ctx.clearRect(rect.startX, rect.startY,rect.w,rect.h);
		draw();
	  }
	}
	function draw() {
	  ctx.clearRect(rect.startX, rect.startY, rect.w, rect.h);
	  ctx.strokeRect(rect.startX, rect.startY, rect.w, rect.h);
	}

<head>
<meta charset="utf-8" />
<title>Draw a rectangle!</title>
</head>

<body onload="init();">
<canvas id="canvas" width="500" height="500"></canvas>
</body>

Tahir Ahmed · Accepted Answer · 2015-07-29 09:17:27Z

You probably need to first clear the entire canvas using clearRect, then draw your imageObj immediately and finally, draw the stroke. All of this happening inside the mouseMove function so it basically keeps drawing these elements on a continuous basis.

Try this snippet below:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var rect = {};
var drag = false;
var imageObj = null;

function init() {
    imageObj = new Image();
    imageObj.onload = function () { ctx.drawImage(imageObj, 0, 0); };
    imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
    canvas.addEventListener('mousedown', mouseDown, false);
    canvas.addEventListener('mouseup', mouseUp, false);
    canvas.addEventListener('mousemove', mouseMove, false);
}

function mouseDown(e) {
    rect.startX = e.pageX - this.offsetLeft;
    rect.startY = e.pageY - this.offsetTop;
    drag = true;
}

function mouseUp() { drag = false; }

function mouseMove(e) {
    if (drag) {
        ctx.clearRect(0, 0, 500, 500);
        ctx.drawImage(imageObj, 0, 0);
        rect.w = (e.pageX - this.offsetLeft) - rect.startX;
        rect.h = (e.pageY - this.offsetTop) - rect.startY;
        ctx.strokeStyle = 'red';
        ctx.strokeRect(rect.startX, rect.startY, rect.w, rect.h);
    }
}
//
init();

<canvas id="canvas" width="500" height="500"></canvas>

Hope this is what you were looking for and helps you in some way.

P.S. I have intentionally applied the red colour on the stroke. You can remove it of course.

Collectives™ on Stack Overflow

Draw a rectangle on a image inside a canvas using mousemove event in javascript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related