Add Image to HTML5 Canvas using JavaScript

← PrevNext →

You can use JavaScript to add an image to an HTML5 Canvas element, dynamically. The <canvas> element is useful for drawing images, to create graphs, animations etc. Here, in this article I’ll show you two different methods on how to add an Image to the <canvas> element using JavaScript.

Before you start, please make sure your browser supports HTML5 <canvas> element. All modern browsers support this element.

Read this: Do you know how to rotate and save an image using canvas?

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.

The Markup with the Script

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.

<html>
<head>
    <title>Add Image to Canvas Using image() Object</title>
</head>
<body>
    <canvas id="canvas">
        Sorry. Your browser does not support HTML5 canvas element.
    </canvas>
</body>

<script>
    window.onload = function () {

        // GET THE IMAGE.
        var 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) {
            // CREATE CANVAS CONTEXT.
            var canvas = document.getElementById('canvas');
            var ctx = canvas.getContext('2d');

            canvas.width = img.width;
            canvas.height = img.height;

            ctx.drawImage(img, 0, 0);       // DRAW THE IMAGE TO THE CANVAS.
        }
    }
</script>
</html>
Try it
Read this: Simple Analog Clock using HTML5 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.

Must read Space Animation on HTML5 canvas and JavaScript for beginners

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.

The Markup
<html>
<head>
    <title>Add Image to Canvas from <img> Element</title>
</head>
<body>
    <!-- FIRST, LOAD IMAGE TO AN <img /> ELEMENT. -->
    <p>
        <p>Showing image using IMG Element</p>
        <img src="https://www.encodedna.com/images/hawa-mahal.jpg" id="imgTaj" />
    </p>

    <p>Showing the above image on a Canvas Element</p>
    <canvas id="canvas">
        Sorry. Your browser does not support HTML5 canvas element.
    </canvas>
</body>

<script>
    window.onload = function () {

        // GET IMAGE FROM <img /> element.
        var image = document.getElementById('imgTaj');

        fill_canvas(image);         // CALL THE FUNCTION TO ADD THE IAMGE TO THE CANVAS.

        function fill_canvas(img) {

            // CREATE CANVAS CONTEXT.
            var canvas = document.getElementById('canvas');
            var ctx = canvas.getContext('2d');

            canvas.width = img.width;
            canvas.height = img.height;

            ctx.drawImage(img, 0, 0);       // DRAW THE IMAGE TO THE CANVAS.
        }
    }
</script>
</html>
Try it

Also read: How to Pass Multiple Image References to a User Defined Function in JavaScript

This is another simple example. 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.

That’s it. Thanks for reading.

← PreviousNext →