How to Add an Image to a Canvas

In HTML canvas, you can enhance your creations by incorporating images. However, encountering difficulties when attempting to do so can be frustrating. This article aims to guide you through the process, discussing a common issue and providing a solution.

Problem: Despite having an existing image source and no JavaScript errors, the image fails to display on the canvas.

Solution: It is crucial to ensure that the image is fully loaded before attempting to draw it onto the canvas. Modify your code to include the onload event listener to the image, as seen below:

var canvas = document.getElementById('viewport'),
context = canvas.getContext('2d');

make_base();

function make_base() {
  base_image = new Image();
  base_image.src = 'img/base.png';
  
  base_image.onload = function() {
    context.drawImage(base_image, 100, 100);
  };
}

By incorporating this simple adjustment, your image will now successfully appear on the canvas once it has been loaded, allowing you to enhance your designs with visual elements.