The canvas element for HTML provides scripts with a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, art, or other visual images on the fly.
<canvas attribute-name="attribute-value"></canvas>
<!doctype html>
<html>
<head>
<style>
canvas
{
background-color: red;
}
</style>
</head>
<body>
<canvas width="100">fallback content for browsers that do not support the canvas element</canvas>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
canvas
{
background-color: red;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<canvas>fallback content for browsers that do not support the canvas element</canvas>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
canvas
{
background-color: red;
}
</style>
</head>
<body>
<canvas>fallback content for browsers that do not support the canvas element</canvas>
<script>
const myelement = document.querySelector("canvas");
myelement.height = "100";
myelement.width = "100";
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
canvas
{
background-color: red;
}
</style>
</head>
<body>
<canvas>fallback content for browsers that do not support the canvas element</canvas>
<script>
const mystyle = document.querySelector("canvas").style;
mystyle.height = "100px";
mystyle.width = "100px";
</script>
</body>
</html>