Thursday, 16 April 2015

Drawing Rectangles With HTML Canvas

x-coordinate:

y-coodinate:

width:

height:

Recently, I discovered how powerful the HTML canvas element is. You can conviniently draw all kinds of shapes, make animations or even create games with it.

In the example above, create any kind of rectangle by typing in some values inside the input field. Create the canvas element with canvas. Optionally, define the width and height of it.

A canvas without drawing abilities is not very usefuel. In the JavaScript code we specify what we want to do with it. getContext("2d") allows you to draw lines, rectangles, circles and much more! Get the data of the canvas element with document.getElementById("id of the canvas"), return the object of it with the getContext("2d") method and start drawing.

This time, we want to draw a rectangle so we use the fillRect() method. The syntax is as follows:

fillRect(x-coordinate, y-coordinate, width, height)

The values, typed in by the user, is stored in document.getElementById ("name of id").value. All this is fired with an onclick event. The rectangle is erased with the clerRect() method.

The JavaScript and HTML Code

#inputDesign
{position:relative;
 top:200px;
 padding:10px;
 background-color:#CCFF99;
 width:130px;
 height:160px;
 border-radius:5px;}
</style>
</head>

<body>

<canvas width="450px" height="300px" id="canvas40">Your browser does not

support the HTML5 canvas tag.</canvas>

<div id="inputDesign">
x-coordinate:<br><input id="inputX40" maxlength="3"

size="3"><br>
y-coodinate:<br><input id="inputY40" maxlength="3"

size="3"><br>
width:<br><input id="inputW40" maxlength="3" size="3"><br>
height:<br><input id="inputH40" maxlength="3" size="3">

<p><button onclick="createRectangle()">create rectangle!

</button></p>
  <p><button onclick="clearRectangle()">clear!

</button></p>

</div>
<script>

var c = document.getElementById("canvas");
var r = c.getContext("2d");
r.fillStyle = "blue";

function createRectangle(){
var x = document.getElementById("inputX").value;
var y = document.getElementById("inputY").value;
var w = document.getElementById("inputW").value;
var h = document.getElementById("inputH").value;

var c = document.getElementById("canvas");
r.fillRect(x,y,w,h);
}

function clearRectangle(){
r.clearRect(0,0,500,500);
}
</script>

Tiger Bird Webdesign

Thursday, 16 April 2015

Drawing Rectangles With HTML Canvas

The JavaScript and HTML Code

No comments:

Post a Comment