-2

I am working in Jquery. I have 4 Cordinates , Width, Height, x Position and Y position. How can i create a Square shape Using This

$('#box').drawRect(20,20,2,30,{color:'red'})

I tried this and Not Working. Looking for a Good Hand

Here is My Demo. http://fiddle.jshell.net/vbm2vhu4/

Dinesh Kanivu
  • 2,551
  • 1
  • 23
  • 55
  • 1
    there's no `drawRect` method on jQuery, are trying to use canvas? – giannisf Jan 14 '15 at 09:51
  • @Giannis Canvas or div, But How can i draw shape with these Cordinates in Jquery – Dinesh Kanivu Jan 14 '15 at 09:54
  • 1
    With jQuery: `$('#box').css({position:"absolute",width:20,height:20,left:2,top:3, backgroundColor:'red'});` (http://fiddle.jshell.net/vbm2vhu4/3/) - my point being that **jQuery doesn't have drawing/shape functions.** Are you trying to use the [jCanvas plugin](http://calebevans.me/projects/jcanvas/docs/methods/), which *does* have a `.drawRect()` method? – nnnnnn Jan 14 '15 at 10:18

3 Answers3

1

try using canvas tag in JavaScript..

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.rect(20, 20, 150, 100);
ctx.stroke();
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
Sarath
  • 2,318
  • 1
  • 12
  • 24
1

JSFIDDLE

JAVASCRIPT

Draw a circle

   $(document).ready(function(){
  var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2;
      var centerY = canvas.height / 2;
      var radius = 70;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'green';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = '#003300';
      context.stroke();
});
Joakim M
  • 1,793
  • 2
  • 14
  • 29
1

Drawing a rectangle requires canvas. You really do not need to use jquery for it. It can be well done with Javascript. I am attaching my example here.

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="150">
Browser does not support the HTML5 canvas tag.</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");


// Blue rectangle
ctx.beginPath();
ctx.lineWidth = "10";
ctx.strokeStyle = "blue";
ctx.rect(50, 50, 50, 50);
ctx.stroke();
</script> 

</body>
</html>

Paste this into a notepad and save as .html and load it in your browser

or jsfiddle http://jsfiddle.net/ssbiswal1987/vsbak0mq/

ssbiswal1987
  • 96
  • 7