Drawing a rectangle in canvas using HTML 5

Sunny.Sagar
Posted by Sunny.Sagar under HTML 5 category on | Points: 40 | Views : 312
FillRect and strokeRect are two methods to draw rectangle in Canvas .
We can use any of the method

Code :
<canvas id="myCanvas" width="578" height="250">
</canvas>
<br />
<input type="button" onclick="DrawRectangle()" value="Draw Rectangles" />

Javascript :
<script type="text/javascript">
function DrawRectangle() {
var context = document.getElementById('myCanvas').getContext('2d');
context.beginPath();
context.lineWidth = "5";
// rect(x, y, rectangle-width, rectangle-height);
context.strokeRect(10, 10, 50, 100);
context.fillStyle = "Red";
context.fillRect(20, 20, 30, 50);

context.strokeStyle = "green";
context.strokeRect(150, 100, 100, 100);
context.globalAlpha = 0.5;
context.fillStyle = "red";
context.fillRect(200, 150, 100, 100);
}
</script>

Comments or Responses

Login to post response