HTML Canvas Images
Last Updated :
24 Nov, 2023
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
Share your thoughts in the comments
Please Login to comment...