drawImage在画布上不起作用

Question

I'm using the library chart.js and I want to draw an image. I set some css to make the canvas "responsive" but the img isn't displayed.

css:

canvas{
    width: 100% !important;
    height: auto !important;
}

Canvas:

<div class="col-lg-6">
    <div class="content-panel">
    <h4><i class="fa fa-angle-right"></i> Categories</h4>
        <div class="panel-body text-center">
            <canvas id="radar_best"></canvas>
        </div>
    </div>
</div>

JS:

base_image = new Image();
base_image.src = '../../images/no_data_graph.jpg';
console.log(base_image.src);
console.log("setting image");
document.getElementById("radar_best").getContext("2d").drawImage(base_image, 100,100);

The img URL is fine. Thanks a lot.

Answer 1

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");