Detailed explanation of HTML5 basics Canvas

What is Canvas?

In the new HTML standard HTML5, the Canvas element is used to draw graphics on web pages. The power of this element tag is that it can directly perform graphic operations on HTML, which has great Value.

The canvas is a rectangular area that you can control every pixel of.

Canvas has multiple ways to draw paths, rectangles, circles, characters, and add images to create rich graphic references.

Let’s look at a piece of code

<article>
<header>
<meta charset="utf-8">
</header>
    <canvas id="canvas" width="150" height="150"></canvas> 
    <script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "rgb(0,0,200)";
    ctx.fillRect(10, 10, 50, 50);
    </script> 
</article>

Draw a rectangle through javascript

Let’s look at an example and draw a circle

<article>
<header>
<meta charset="utf-8">
</header>
    <canvas id="myCanvas" width="200" height="100"></canvas> 
    <script>
        var c=document.getElementById("myCanvas");
        var cxt=c.getContext("2d");
        cxt.fillStyle="#FF0000";
        cxt.beginPath();
        cxt.arc(70,18,15,0,Math.PI*2,true);
        cxt.closePath();
        cxt.fill();
    </script> 
</article>