ล้าง Chart บน HTML5 Canvas เพื่อไม่ให้ Hover Events ทำงานต่อ

วิธี: ลบ Canvas เดิม และสร้าง Canvas ใหม่

การล้างแค่เนื้อหา (clearRect) อาจไม่พอ เพราะ event listeners อาจค้างอยู่ วิธีที่แน่ใจคือแทนที่ element ทั้งตัว

var resetCanvas = function() {
    $('#results-graph').remove(); // ลบ canvas เดิม
    $('#graph-container').append(''); // เพิ่มใหม่
    
    canvas = document.querySelector('#results-graph');
    ctx = canvas.getContext('2d');
    
    // ปรับขนาดให้ตรง container
    ctx.canvas.width = $('#graph').width();
    ctx.canvas.height = $('#graph').height();
    
    // วาดเนื้อหาใหม่หรือทิ้งว่าง
    var a = canvas.width / 2;
    var b = canvas.height / 2;
    ctx.font = '12pt Calibri';
    ctx.textAlign = 'left';
    ctx.fillText('left aligned text on the canvas', a, b);
};

วิธีนี้รับประกันว่าไม่มี event handlers เก่าค้างอยู่