Chartjs-DrawImage not working on canvas

by

3👍

✅

Load an image takes time, when you execute the drawImage in your current code, it may not loaded when you want to use it, and that would comes out an unexpected result.

What you should do is use base_image.onload, which will be called when image is fully loaded. Then you can use drawImage to draw the loaded image on the canvas.

base_image = new Image();
base_image.onload = function() {
    // When image loaded, you can then draw it on the canvas.
    document.getElementById("radar_best").getContext("2d").drawImage(base_image, 100,100);
};

base_image.onerror = function() {
    // It's always good to have some error handling.
    console.log('image load error').
    // do somthing else....
};
//always set the src after the onload callback as it is possible that image is already loaded in the browser memory hence onload event will never fire
base_image.src = '../../images/no_data_graph.jpg';
console.log(base_image.src);
console.log("setting image");

Leave a comment