How to draw images on canvas in javascript

In this article we will explore how to draw Images on Canvas.

JavaScript Canvas

The HTML5 canvas element provides a powerful platform for dynamic graphics on the web. It allows us to draw shapes, text, and images dynamically. In this tutorial, we'll focus on drawing images.

Here's a simple example:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Canvas Drawing Example</title>
</head>

<body>
  <canvas id="myCanvas" width="400" height="200" style="border:1px solid #000;"></canvas>

  <script>
    // Get the canvas element
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');

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

        // Set the source of the image
        img.src = 'path/to/your/image.jpg';

        // Wait for the image to load
        img.onload = function() {
            // Draw the image on the canvas
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        };
  </script>
</body>

</html>

Note: Replace 'path/to/your/image.jpg' with the actual path to your image file.

This is a basic example, and you can customize it further based on your requirements. You can draw shapes, text, and perform various transformations using the Canvas API.

if you want to allow users to upload an image and then draw it on a canvas, you can use an HTML input element of type "file" to enable image uploads. Here's an example:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Canvas Drawing Example with Upload</title>
</head>

<body>
  <input type="file" id="imageInput" accept="image/*">
  <canvas id="myCanvas" width="400" height="200" style="border:1px solid #000;"></canvas>

  <script>
    var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');
        var imageInput = document.getElementById('imageInput');

        // Listen for changes in the input field
        imageInput.addEventListener('change', handleImageUpload);

        function handleImageUpload(event) {
            var file = event.target.files[0];

            if (file) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    var img = new Image();
                    img.src = e.target.result;

                    // Wait for the image to load
                    img.onload = function () {
                        // Draw the image on the canvas
                        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
                    };
                };

                // Read the uploaded file as a data URL
                reader.readAsDataURL(file);
            }
        }
  </script>
</body>

</html>

This allows users to upload an image, and the script dynamically draws it on the canvas.

Techstackkit

How to draw images on canvas in javascript

JavaScript Canvas

Happy Coding! ❤️