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

javascript jquery html canvas html5-canvas

16,088

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.

16,088

Author by

Gajini

Updated on June 07, 2022

Comments

Gajini almost 2 years

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>