All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

HTML5 Canvas Examples With Source Code

Last Updated : Mar 11, 2024

HTML5 Canvas Examples With Source Code

In this tutorial we will show you the solution of HTML5 canvas examples with source code, in HTML today we will learn about what canvas in html and how it is used is.

So, canvas is an element in html which is used to draw graphics.

The canvas tag is only act as a container in html in which we are able to draw graphics with help of JavaScript.

Canvas has several methods for drawing, let us understand them.

Step By Step Guide On HTML5 Canvas Examples With Source Code :-

Here, as other elements canvas is also a rectangular area in html and by default it has no borders and content inside it.

To use canvas in html, create <canvas> in body of html. And also it is a paired tag, so it must have closing tag.

As, we know it’s for graphics then there must be an id inside canvas to apply JavaScript.

<!DOCTYPE html>
      <html>
        <head>
    <title>
        canvas
    </title>
    <script src="js/jquery.js"></script>
</head>
<body style="text-align: center;">
    <canvas id="myCanvas" width="200" height="100"
        style="border:1px solid white; box-shadow: 0 0 10px black;margin-top: 200px;">
    </canvas>
    <canvas id="thiscanvas" width="200" height="100"
        style="border:1px solid white; box-shadow: 0 0 10px black;margin-top: 200px;">
    </canvas>
    <canvas id="thatcanvas" width="200" height="100"
        style="border:1px solid white; box-shadow: 0 0 10px black;margin-top: 200px;">
    </canvas>
    <canvas id="minecanvas" width="200" height="100"
        style="border:1px solid white; box-shadow: 0 0 10px black;margin-top: 200px;">
    </canvas>
    <canvas id="okcanvas" width="200" height="100"
        style="border:1px solid white; box-shadow: 0 0 10px black;margin-top: 200px;">
    </canvas>
</body>
<script>
    var c = document.getElementById("thiscanvas");
    var cttx = c.getContext("2d");
    cttx.moveTo(0, 0);
    cttx.lineTo(200, 100);
    cttx.stroke();
</script>
<script>
    var c = document.getElementById("thatcanvas");
    var cttx = c.getContext("2d");
    cttx.beginPath();
    cttx.arc(95, 50, 40, 0, 2 * Math.PI);
    cttx.stroke();
</script>
<script>
    var c = document.getElementById("minecanvas");
    var cttx = c.getContext("2d");
    cttx.font = "30px Arial";
    cttx.fillText("Hello World", 10, 50);
</script>
<script>
    var c = document.getElementById("okcanvas");
    var cttx = c.getContext("2d");
    cttx.font = "30px Arial";
    cttx.strokeText("Hello World", 10, 50);
</script>
      </html>
  1. First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively. Here we link a script file of JavaScript having .js extension.
  4. Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here.
  5. In body, here we create five canvas here with attributes like id, width height and style. id is for JavaScript where rest are for dimensions and styles.
  6. Here, we create five canvas tags with different id names.
  7. After, this here we create four different script tags. You can merge all of them in one. But for better clarification, we create separate for scripts for separate canvas.
  8. Here, we use some JavaScript codes for draw graphics. You can modify them according to your needs.
  9. At last, the <body> and <html> tags are closed with </body> and </html> respectively.

Conclusion :-

In conclusion, here we can say that with the help of this article we are able to understand html canvas tag and how to use in html with JavaScript.

I hope this tutorial on HTML5 canvas examples with source code helps you.