Sakala Code
1 year ago
sakalacode
#html
HTML Canvas Tag
The <canvas> Canvas tag in HTML is used to draw graphics on the fly via scripting (usually JavaScript). It is a versatile element that allows you to create dynamic and interactive graphics, such as charts, animations, and game graphics. The <canvas> element itself does not draw anything; you need to use JavaScript to render graphics within it.
Example HTML Canvas Tag
<!DOCTYPE html>
<html>
<head>
<title>Canvas Tag Example</title>
</head>
<body>
<h1>Sakalacode Canvas Example</h1>
<canvas id="SakalaCanvas" width="175" height="100" style="border:1px solid #000000;"></canvas>
<script>
var canvas = document.getElementById('SakalaCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 150, 75);
</script>
</body>
</html>
Key Points:
HTML Canvas <canvas> Tag Attributes:
- width: The canvas width Default is 300 pixels.
- height: The canvas height Default is 150 pixels.
JavaScript Context:
- getContext('2d') method is used a drawing 2D rendering.
- 3D graphics Use getContext('webgl') or getContext('experimental-webgl').
HTML Canvas Tag Drawing Methods:
- fillRect(x, y, width, height)
- strokeRect(x, y, width, height)
- clearRect(x, y, width, height)
HTML Video element
HTML <video> element is used to embed video content into a web page. The <audio> tag is su...
Sakala Code
1 year ago
