How to add an image to the canvas with JavaScript?

Spread the love

To add an image to an HTML canvas using JavaScript, we can follow these steps:

Get a reference to the canvas element in your HTML document.
Create an Image object in JavaScript.

Set the source of the Image object to the URL of the image you want to load.
Use the onload event of the Image object to ensure the image has loaded before drawing it onto the canvas.
Inside the onload event handler, use the drawImage() method of the canvas context to draw the image onto the canvas.

For example, we write:

<!DOCTYPE html>
<html>
<head>
    <title>Canvas Image Example</title>
</head>
<body>
    <canvas id="myCanvas" width="400" height="300"></canvas>

    <script>
        // Step 1: Get a reference to the canvas element
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');

        // Step 2: Create an Image object
        var img = new Image();

        // Step 3: Set the source of the Image object
        img.src = 'path/to/your/image.jpg';

        // Step 4: Use the onload event to ensure the image has loaded
        img.onload = function() {
            // Step 5: Draw the image onto the canvas
            ctx.drawImage(img, 0, 0); // Draw the image at position (0,0)
            // You can also specify width and height if you want to resize the image:
            // ctx.drawImage(img, 0, 0, 200, 150); // Draw the image at position (0,0) with width 200 and height 150
        };
    </script>
</body>
</html>

Replace 'path/to/your/image.jpg' with the actual URL or path of your image file.

This code will load the image onto the canvas once it’s loaded in the browser.

Adjust the width and height of the canvas element as needed.

Related Posts

By John Au-Yeung

Leave a Reply Cancel reply