Where is the Canvas html tag used?
The <canvas> tag is used to draw graphics on the fly with scripting languages. (Usually Javascript). The <canvas> tag is actually a container, you need to use script to draw graphics. What is the Canvas API feature, which has an important place among the APIs that come with HTML5, and how it works are included with canvas examples.
Line, rectangle, circle, circle, etc. with HTML5 <canvas> tag. You can create shapes, give color with processes such as gradient, coloration.
<canvas id="drawingK">
<script type="text/javascript">
var drawing=document.getElementById('drawingK');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100)
</script>
</canvas>
Canvas samples
The HTML5 <canvas> tag occupies a rectangular area inside the page.
When the label is used, it has no drawing and border.
The HTML <canvas> tag is usually written as follows.
<canvas id="drawingField" width="300" height="300"></canvas>
NOTE: Always give the <canvas> tag an id attribute (for JavaScript selection), height and width.
Don't forget to add a border with the style property to see the drawing area and drawings better.
<canvas id="drawing-area" width="300" height="300" style="border:1px solid #000000;">
</canvas>
Below are various usage examples.
<!DOCTYPE HTML>
<html lang="tr">
<head>
<meta charset="UTF-8" />
<title>HTML5 Canvas Examples</title>
</head>
<body>
<canvas id="drawing-area" width="270" height="160" style="border:1px solid #c3c3c3;">
</canvas>
<script>
var drawingArea = document.getElementById("drawing-area);
/* Red rectangle */
var ctx = drawingField.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(20, 20, 100, 50);
/* Gradient rectangle 1 */
var grd = ctx.createLinearGradient(140, 20, 240, 70);
grd.addColorStop(0, "black");
grd.addColorStop(1, "white");
ctx.fillStyle = grd;
ctx.fillRect(140, 20, 100, 50);
/* Gradient rectangle 2 */
var grd2 = ctx.createLinearGradient(20, 90, 120, 90);
grd2.addColorStop(0, "black");
grd2.addColorStop("0.3", "magenta");
grd2.addColorStop("0.5", "blue");
grd2.addColorStop("0.6", "green");
grd2.addColorStop("0.8", "yellow");
grd2.addColorStop(1, "red");
ctx.fillStyle = grd2;
ctx.fillRect(20, 90, 100, 50);
/* Colored text */
ctx.font = "30px Verdana";
var grd3 = ctx.createLinearGradient(140, 20, 240, 90);
grd3.addColorStop(0, "black");
grd3.addColorStop("0.3", "magenta");
grd3.addColorStop("0.6", "blue");
grd3.addColorStop("0.8", "green");
grd3.addColorStop(1, "red");
ctx.strokeStyle = grd3;
ctx.strokeText("Canvas!", 135, 125);
ctx.font = "15px arial";
ctx.fillStyle = "black";
ctx.fillText("www.codingsource.net", drawing-area.height / 2, drawing-area.width / 2 + 20);
</script>
</body>
</html>
You can try adding the following canvas examples between the <script> tag.
drawing a line
var drawingField = document.getElementById("drawingField");
var ctx = drawingField.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(270, 160);
ctx.stroke();
draw a circle
var drawingField = document.getElementById("drawingField");
var ctx = drawingField.getContext("2d");
ctx.beginPath();
ctx.arc(120, 80, 60, 0, 2 * Math.PI);
ctx.stroke();
draw a circle
var drawingField = document.getElementById("drawingField");
var ctx = drawingField.getContext("2d");
ctx.beginPath();
ctx.arc(120, 80, 60, 0, 2 * Math.PI);
ctx.lineWidth = 5;
ctx.fillStyle = "blue";
ctx.fill();
ctx.stroke();
draw a rectangle
var drawingField = document.getElementById("drawingField");
var ctx = drawingField.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(10, 10, 240, 140);
Write
var drawingField = document.getElementById("drawingField");
var ctx = drawingField.getContext("2d");
ctx.font = "20px Arial";
ctx.fillText("www.codingsource.net", 30, 80);
Write border text
var drawingField = document.getElementById("drawingField");
var ctx = drawingField.getContext("2d");
ctx.font = "20px Arial";
ctx.strokeText("www.codingsource.net", 30, 80);
Creating and applying a gradient
var drawingField = document.getElementById("drawingField");
var ctx = drawingField.getContext("2d");
// Creates a gradient
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "#000");
grd.addColorStop(1, "#FFF");
// Applies gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 200, 140);
Creating and applying a circular gradient
var drawingField = document.getElementById("drawingField");
var ctx = drawingField.getContext("2d");
// Creates a Circular Gradient
var grd = ctx.createRadialGradient(110, 80, 5, 110, 80, 70);
grd.addColorStop(0, "#FF0000");
grd.addColorStop(1, "#FFFFFF");
// Applies Circular Gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 250, 140);