Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to draw an Image with drawImage() in HTML5?
The "canvas" element merely serves as a container for visuals; drawing the graphics requires the use of a scripting language. It is a procedural, low-level model without an internal scene that updates a bitmap.
The drawImage() function is what we employ to draw an image onto a canvas. This feature transfers a video, canvas, or picture to the canvas.
Syntax
context.drawImage(img, x, y, swidth, sheight, sx, sy, width, height);
Where,
Img − Determines whether to utilise a video, canvas, or image.
Sx − The starting x coordinate for clipping.
Sy − The y point at which clipping should begin
Swidth − The width of the trimmed image.
Sheight − The height of the trimmed image.
Width − The image's width that will be used (stretch or reduce the image).
Height − The image's height that will be used (stretch or reduce the image).
X − The x coordinate for the image's location on the canvas.
Y − The canvas's y coordinate for where to put the picture
Following are the examples…
Example 1
Using the drawimage() method
In the following example we are using drawimage() method which is used to draw images.
<!DOCTYPE html> <html> <body> <p>Photo</p> <img id="image" src="C:\Users\Lenovo\Desktop\Tutorialspoint\1.jpg" /> <p>Canvas:</p> <canvas id="newCanvas" width="1000" height="300" style="border: 5px solid black"> </canvas> <script> window.onload = function () { var canvas = document.getElementById("newCanvas"); var ctx = canvas.getContext("2d"); var image = document.getElementById("image"); ctx.drawImage(image, 100, 20,); }; </script> </body> </html>
On executing the above script, it will generate the output consisting of an img uploaded using the src and the canvas will get trigged and draw the same img as we uploaded on the webpage.
Example 2
Adding width and height Attributes
In the following we are drawimage() to draw image and we are adding width and height to get image drawn on required size.
<!DOCTYPE html> <html> <body> <p>Photo</p> <img id="pic" src="C:\Users\Lenovo\Desktop\Tutorialspoint\3.jpg" /> <p>Canvas:</p> <canvas id="newCanvas" width="400" height="300" style="border: 5px solid black"> </canvas> <script> window.onload = function () { var canvas = document.getElementById("newCanvas"); var ctx = canvas.getContext("2d"); var image = document.getElementById("pic"); ctx.drawImage(image, 100, 20,150,160); }; </script> </body> </html>
When the script gets executed, it will generate the output consisting of an img uploaded using the src and the canvas will get activated and draw the same img as we uploaded on the webpage along with width and height.
337 Views
