How to draw a rectangle using Javascript?

**Weng** · 05-08-2006 04:13 AM

Hi,

How to use Javascript to draw a rectangle when the user drags the mouse across the webpage?

I know the drawing methods but how do we allow the user to be able to draw a rectangle on the webpage?

e.g When the user drags the mouse across the page and releases the mouse button, a rectangle appears.

**Kor** · 05-08-2006 04:43 AM

here u are:

PHP Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<meta http-equiv="Content-Style-Type" content="text/css">

<meta http-equiv="Content-Script-Type" content="text/javascript">

<style type="text/css">

<!--

.square {

    border: 1px solid #FF0000;

    position: absolute;

}

-->

</style>

<script type="text/JavaScript">

var d;var posx;var posy;var initx=false;var inity=false

function getMouse(obj,e){

posx=0;posy=0;

var ev=(!e)?window.event:e;//Moz:IE

if (ev.pageX){//Moz

posx=ev.pageX+window.pageXOffset;

posy=ev.pageY+window.pageYOffset;

}

else if(ev.clientX){//IE

posx=ev.clientX+document.body.scrollLeft;

posy=ev.clientY+document.body.scrollTop;

}

else{return false}//old browsers

obj.onmousedown=function(){

initx=posx; inity=posy;

d = document.createElement('div');

d.className='square'

d.style.left=initx+'px';d.style.top=inity+'px';

document.getElementsByTagName('body')[0].appendChild(d)

}

obj.onmouseup=function(){initx=false;inity=false;}

if(initx){

d.style.width=Math.abs(posx-initx)+'px';d.style.height=Math.abs(posy-inity)+'px';

d.style.left=posx-initx<0?posx+'px':initx+'px';

d.style.top=posy-inity<0?posy+'px':inity+'px';

}

</script>

</head>

<body onmousemove="getMouse(this,event)">

&nbsp;

</body>

</html>

**Weng** · 05-08-2006 10:39 PM

I've tried it and it can work now

Thank you!

**Weng** · 05-09-2006 03:43 AM

Hmm.....

About the drawing of rectangles, there is a drawing space within the webpage and the drawing can only be done within that space.

I have thought of inserting a div.

<div id="Canvas" style="width:200px; height:200px; border:solid black;"

How to integrate the div into the code given above?
And can I use onDrag = "getMouse(event);" for the div ?

something like:

<div id="Canvas" style="width:200px; height:200px; border:solid black;"
onDrag = "getMouse(event);">

**sridhar_423** · 05-09-2006 04:30 AM

modify Kor's code slightly.

<body>
<div id="Canvas" style="width:200px; height:200px; border:solid black;"
onmousemove = "getMouse(event);">

obj.onmousedown=function(){
initx=posx; inity=posy;
d = document.createElement('div');
d.className='square'
d.style.left=initx+'px';d.style.top=inity+'px';
Canvas.appendChild(d)
}

should work..

**Priyal** · 04-23-2012 11:34 AM

pls provide the whole procedure for drawing the rectangle using javascript upon usr action..

Thread: How to draw a rectangle using Javascript?

Thread Tools

Display

How to draw a rectangle using Javascript?

javascript code for drawing dynamic rectangle

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions