0

I am using HTML5 canvas to draw rectangle. When i give rectangle width and height more than 200, right and bottom area is cut or not displayed in web page. See my code

<body>
<canvas id="ex1"/>
<script>
var line=document.getElementById("ex1");
var ctx=line.getContext("2d");
ctx.beginPath();
ctx.strokeStyle = "black";
ctx.lineWidth="6";
ctx.rect(5,5,380,240);
ctx.stroke();
</script>
</body>

Output:

enter image description here

Anyone can give solution for this issue?

Thanks, Bharathi.

Bharathi
  • 1,288
  • 2
  • 14
  • 40

1 Answers1

1

This is because the default size of canvas width and height is 300 and 150. If you want to draw rectangle more then this size then you have to increase the size of canvas as here

 <body>
  <canvas id="myCanvas" width="500" height="550" style="border:1px solid #c3c3c3;">
 <script>
  var canvas = document.getElementById("myCanvas");
  var context = canvas.getContext('2d');

  context.beginPath();
  context.rect(5, 5, 380, 240);
  context.fillStyle = 'yellow';
  context.fill();
  context.lineWidth = 7;
  context.strokeStyle = 'black';
  context.stroke();
</script>
</body>

The working fiddle is here fiddle

You can also see the below link for reference link

Community
  • 1
  • 1
Roshan
  • 2,144
  • 2
  • 16
  • 28
  • if the solution solved your query you can accept the answer(by selecting the green tick mark), or else if you have something else you can ask that too. :) – Roshan Jul 17 '14 at 10:11