HTML5 Canvas - Using Canvas in HTML5

By: Emiley J Emailed: 1750 times Printed: 2434 times    

Latest comments
By: rohit kumar - how this program is work
By: Kirti - Hi..thx for the hadoop in
By: Spijker - I have altered the code a
By: ali mohammed - why we use the java in ne
By: ali mohammed - why we use the java in ne
By: mizhelle - when I exported the data
By: raul - no output as well, i'm ge
By: Rajesh - thanx very much...
By: Suindu De - Suppose we are executing

HTML5 introduces the new <Canvas> tag that lets you draw paths, boxes, circles, characters, and adding images onto a webpage. In fact you can use Canvas to draw graphics on the fly on a webpage. The Canvas tag works hand-in-hand with JavaScript to do the actual drawing. Here's a simple code that shows how you do this.

<canvas id="myCanvas" width="200" height="100"></canvas>

The above code just tells the browser to reserve that space with that size for a canvas and the canvas itself is empty. You need to use JavaScript to actuall draw within that space. The below JavaScript for example draws a simple line within the canvas.

<script>
var c=document.getElementById("myCanvas");
var mcontext=c.getContext("2d");
mcontext.moveTo(0,0);
mcontext.lineTo(300,150);
mcontext.stroke();
</script>

What you have done is to get a handle to the canvas by using its id 'mycanvas', then getting a context to it to run commands on it. The getContext("2d") object is a built-in HTML5 object, with many properties and methods for drawing paths, boxes, circles, text, images, and more. In the above example we just drew a line across the canvas. The output of which will be like this.

Draw a line using canvas in html5

You can do lots of other things with the canvas for example,

To draw a rectangle in Red.

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>

To draw a circle

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
</script>

To draw some text

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("I Love Java Samples",10,50);
ctx.stroke();
</script>

To draw a gradient

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d"); // Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"brown");
grd.addColorStop(1,"white"); // Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
</script>

HTML5 Home | All HTML5 Tutorials | Latest HTML5 Tutorials

Sponsored Links

If this tutorial doesn't answer your question, or you have a specific question, just ask an expert here. Post your question to get a direct answer.



Bookmark and Share

Comments(1)


1. View Comment

How can I save the canvas edited by the user from server side. That is if user presses save button, the canvas should be save in the server side database. Is it possible. So that the user can retrieve it whenever he wants and use it again.

View Tutorial          By: pavan at 2014-10-14 08:26:55

Your name (required):


Your email(required, will not be shown to the public):


Your sites URL (optional):


Your comments:



More Tutorials by Emiley J
Password must include both numeric and alphabetic characters - Magento
What is Hadoop?
Returning multiple values from a web service
Tomcat and httpd configured in port 8080 and 80
Java Webservices using Netbeans and Tomcat
Java WebService connected to Database
How to Deploy a Java Web Service
Call a webservice in Java
Java WebService - Create your first web service in Java
package javax.jws does not exist
Getting Started with Android
HTML5 Location - getCurrentPosition() in HTML5
HTML5 Canvas - Using Canvas in HTML5
HTML5 - Introduction
HTML5 Video - Handling video in HTML5

More Tutorials in HTML5
HTML5 Video - Handling video in HTML5
HTML5 - Introduction
HTML5 Canvas - Using Canvas in HTML5
HTML5 Location - getCurrentPosition() in HTML5

More Latest News
Most Viewed Articles (in HTML5 )
HTML5 Canvas - Using Canvas in HTML5
HTML5 - Introduction
HTML5 Location - getCurrentPosition() in HTML5
HTML5 Video - Handling video in HTML5
Most Emailed Articles (in HTML5)
HTML5 Canvas - Using Canvas in HTML5
HTML5 Video - Handling video in HTML5
HTML5 Location - getCurrentPosition() in HTML5
HTML5 - Introduction