|
In this article, we will see HTML Canvas Images. We generally use images on our web page through <img> element. In this article, we will see HTML Canvas images in HTML and JavaScript.
The drawImage() Method is used to embed images or video on Canvas. With this method, we can also change the height and width of the image and clip the image.
Image on Canvas
The image on Canvas refers to a visual representation or artwork created through the application of various pigments and brushstrokes on a canvas surface.
Example 1: The example shows the Image on Canvas with the original size of the image.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>HTML Canvas Images</title>
<link rel="stylesheet"
href="style.css">
<style>
@import url(
body {
font-family: 'Poppins', sans-serif;
}
img {
display: none;
}
</style>
</head>
<body>
<div style="display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100vh;">
<h1 style=" color: green;">
GeeksforGeeks
</h1>
<p style="font-size: 20px;">
HTML Canvas Images
</p>
<canvas width="600"
height="150"
id="canvas-element">
</canvas>
<img src=
id="imgele"
alt="gfgimage">
</div>
<script>
const canvaselement =
document.getElementById("canvas-element").getContext("2d");
const imageele =
document.getElementById("imgele");
canvaselement.drawImage(imageele, 20, 20);
</script>
</body>
</html>
|
Output:
 With Original size Example 2: The example illustrates an Image on Canvas with the custom width and height of the image.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>HTML Canvas Images</title>
<link rel="stylesheet"
href="style.css">
<style>
@import url(
body {
font-family: 'Poppins', sans-serif;
}
img {
display: none;
}
</style>
</head>
<body>
<div style="display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100vh;">
<h1 style=" color: green;">
GeeksforGeeks
</h1>
<p style="font-size: 20px;">
HTML Canvas Images
</p>
<canvas width="600"
height="250"
id="canvas-element">
</canvas>
<img src=
id="imgele"
alt="gfgimage">
</div>
<script>
const canvaselement =
document.getElementById("canvas-element").getContext("2d");
const imageele =
document.getElementById("imgele");
canvaselement.drawImage(imageele, 20, 20, 570, 200);
</script>
</body>
</html>
|
Output:
 With custom size Example 3: The example illustrates an Image on Canvas with the Custom size and clipped image.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>HTML Canvas Images</title>
<link rel="stylesheet"
href="style.css">
<style>
@import url(
body {
font-family: 'Poppins', sans-serif;
}
img {
display: none;
}
</style>
</head>
<body>
<div style="display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100vh;">
<h1 style=" color: green;">
GeeksforGeeks
</h1>
<p style="font-size: 20px;">
HTML Canvas Images
</p>
<canvas width="600"
height="250"
id="canvas-element">
</canvas>
<img src=
id="imgele"
alt="gfgimage">
</div>
<script>
const canvaselement =
document.getElementById("canvas-element").getContext("2d");
const imageele =
document.getElementById("imgele");
canvaselement.drawImage(imageele, 20, 20, 570, 200);
</script>
</body>
</html>
|
Output:
 HTML CANVAS IMAGE CLIPPED
|
Difference Between HTML and SGML
SVG in HTML
HTML Canvas Coordinates
Shades of Red - Color with Names, Hex, RGB, and HSL Color Codes
How to use HTML for Data Visualization ?