Drawing simple objects with canvas HTML 5 tag : Part #1


The element is used to render simple graphics like linear graphs, graphs, and other graphical elements on the client side. While the browser support is decent, IE still remains the bug (Supported only via javascript),From the markup point of view, there isn’t much to the tag. You give it the width, height, and give it an id. Also, you may provide some alternative text for people browsing the webpage in non-canvas supported browsers. Don’t worry, the supported browsers won’t see that thing.

BASIC <CANVAS> TAG USAGE

As described above, all you may do is give the tag it’s width, height and id with some non-supported browser stuff.

<canvas id="rectangle">
<i>Canvas is not supported in this browser! Please,
kindly, switch to a canvas supporting browser for
premium experience </i></canvas>

GETTING ROCKIN’ WITH JAVASCRIPT

Once, you’ve placed a tag in your document, given the dimensions you wanted, as well as provided non-supporting browser stuff, you’re ready to rock’n’roll in javascript. We use javascript to access and draw content on the element. In this example, we’ll create a 2d rectangle [3d support soon!]. The following code shows the javascript fetches the object by it’s id value and creates a two-dimensional drawing context.

<canvas id="myCanvas">
var canvas = document.getElementById("rectangle");
var context = canvas.getContext("2d");
</canvas>

Once you have the drawing context, you might employ various methods to draw on it. e.g., the strokeRect(x,y,width,height) method takes x and y coordinates and height and width, all specified as numbers representing pixel value. Here’s the code:-

context.strokeRect(20,20,200,300);

The following code would draw a simple rectangle of 200×300 px starting at the coordinate 20 and 20 from the origin of the canvas. You can also set a particular color for the stroke. You can accomplish this by strokeStyle(), like this:-

context.strokeStyle = "blue";
context.strokeRect(20,20,200,300);

If you want to fill the you can do so by using the fillRect method, like this:-

context.fillRect(100,20,60,60);

The parameters for this are (x,y,width,height) value.

By default, the fill color is black. If you wish to change or define the color by using fillColor().Let’s, for the sake of the example, set the color to be blue

context.fillStyle = "rgba(0,0,255,0.3)";

Note: You may see that I’ve used fillStyle, because that is the way how we can use rgba. Learn more about rgba in css here →

FINAL CODE AND EXAMPLE:-

Don’t want to see all the code.[some of the code has been modified. There were some issues I couldn’t get right] Get all of it right here:-

<!--<span class="hiddenSpellError" pre="" data-mce-bogus="1"-->DOCTYPE html>
<html>
<body>
<h1> Canvas tutorial by <a href="https://webdesignerarsenal.wordpress.com">WDA</a></h1>
<canvas id="rectangle"><i>Canvas is not supported in this browser! Please,
kindly, switch to a canvas supporting browser for
premium experience </i></canvas>

<script>
var c=document.getElementById('rectangle');
var ctx=c.getContext('2d');
ctx.fillStyle='#0000FF';
ctx.fillRect(0,0,400,200);
</script>
</body>
</html>

Note: Not all properties described above are used in the last example and the javascript has been shortened. You may use the code and distribute it as well as modify it. A linkback is always appreciated.

Further reading:-

So, how did you like the <canvas> tag in HTML 5. Tell us in the comments below.

Enter your email address to follow this blog and receive notifications of new posts by email.

One thought on “Drawing simple objects with canvas HTML 5 tag : Part #1

Add your Awesome voice. Let's have a meaningful conversation. And remember, don't be a spammer (We hate 'em).

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s