当移动器悬停在条形图列上时，drawImage（）函数绘制的图像隐藏

Question

I draw a chart using chart js on canvas. Then I draw a image on top of the column of chart. When I load the page It shows properly. But when I hover mouse on chart column, image gone hide.

I have tried with chart js. I have tried with morris js.

            let myChart = document.getElementById('myChart').getContext('2d');

            // Global Options
            Chart.defaults.global.defaultFontFamily = 'Lato';
            Chart.defaults.global.defaultFontSize = 18;
            Chart.defaults.global.defaultFontColor = '#777';

            let massPopChart = new Chart(myChart, {
                type: 'bar', // bar, horizontalBar, pie, line, doughnut, radar, polarArea
                data: {
                    labels: ['Boston', 'Worcester', 'Springfield', 'Lowell', 'Cambridge', 'New Bedford'],
                    datasets: [{
                        label: 'Population',
                        data: [
                            6,2,7,3,4,6
                        ],
                        backgroundColor: '#1d569e',
                        borderWidth: 1,
                        borderColor: '#777',
                        hoverBorderWidth: 3,
                        hoverBorderColor: '#000'
                    }]
                },
                options: {
                    title: {
                        display: true,
                        text: 'Largest Cities In Massachusetts',
                        fontSize: 25
                    },
                    legend: {
                        display: true,
                        position: 'right',
                        labels: {
                            fontColor: '#000'
                        }
                    },
                    layout: {
                        padding: {
                            left: 50,right: 0,bottom: 0,top: 0
                        }
                    },
                    tooltips: {
                        enabled: true
                    },
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true
                            }
                        }]
                    }
                }
            });

            var canvas = document.getElementById('myChart');
            var context = canvas.getContext('2d');
            var imgPath = 'https://i.imgur.com/t0MRiAf.png';
            var imgObj = new Image();
            imgObj.src = imgPath;
            imgObj.onload = function() {
                context.drawImage(imgObj, 0, 0, 100, 100);
            }

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>

 <div class="container">
            <canvas id="myChart"></canvas>
        </div>

I want to show the image on top of column. It will be responsive.

</div>