Before you start, please make sure your browser supports HTML5 <canvas> element. All modern browsers support this element.
How to rotate and save the image using
1) Add Image to Canvas Using image() Object
In the first method, I’ll use JavaScript image() object to load an image and initialize the object with the image source. This is one of the simplest ways to dynamically add an image to your web page and I’ll use this technique to add the image to the canvas element.
In the markup section, I have added the <canvas> element inside the <body> tag. Between the elements opening and closing tag, I have a message. This is in case the browser does not support HTML5 canvas; the user will see the message on the web page.
<body>
<canvas id="canvas">
<!--an empty canvas, which we'll fill with an image dynamically using JS.-->
</canvas>
</body>
<script>
window.onload = function () {
// GET THE IMAGE.
let img = new Image();
img.src = '../../images/hawa-mahal.jpg';
// WAIT TILL IMAGE IS LOADED.
img.onload = function () {
fill_canvas(img); // FILL THE CANVAS WITH THE IMAGE.
}
function fill_canvas(img) {
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d'); // CREATE CANVAS CONTEXT.
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0); // DRAW THE IMAGE TO THE CANVAS.
}
}
</script>Related tutorial: How to design a simple analog Clock using Canvas and JavaScript
Once you have declared and assigned the image (the source), first check if its fully loaded. Else, you cannot draw it on the canvas. Therefore, I am using img.onload property. Once the image is loaded, call the fill_canvas() function with image.
You may also like this 👇
How to add text to an Image using CSS and Canvas and save the image?
The fill_canvas() function is a user defined function, where I am creating a context of the <canvas> element. The "context" will provide many methods and properties to draw an image. However, I am only using context’s drawImage() method to draw the image.
2) Add Image to Canvas from <img> Element
In the second method, I’ll get the image from the <img> element and add the image to the canvas. Therefore, first I have to add an <img> element on my web page inside the <body> section. Remember, in the first method I had only the <canvas> element. Here however, I have two elements.
<html>
<head>
<title>Add Image to Canvas from <img> Element</title>
</head>
<body>
<!-- First, load the image to the <img /> element. -->
<h2>Showing image using IMG Element</h2>
<p>
<img src="https://www.encodedna.com/images/hawa-mahal.jpg" id="imgTaj" />
</p>
<!-- Next, load the above image to the canvas. -->
<h2>Showing the above image on a Canvas Element</h2>
<canvas id="canvas">
</canvas>
</body>
<script>
window.onload = function () {
// Get image from <img /> element.
let image = document.getElementById('imgTaj');
fill_canvas(image); // Call the function to add the image to the canvas.
function fill_canvas(img) {
// Create canvas context.
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0); // Draw image to the canvas.
}
}
</script>
</html>How to Pass Multiple Image References to a User Defined Function in JavaScript
As you can see, I am not using any object here. Simply get the id of the <img> element, store it in a variable and pass the variable to the canvas context. The context and drawing function is similar to the one I have described in the first method.
Happy coding. ☺