How to clear a chart from HTML5 canvas so that hover events cannot be triggered?

To clear a chart from canvas, delete the <canvas> element and then append a new <canvas> element to the parent container as in the below-given code −

var resetCanvas = function(){
   $('#results-graph').remove();  
   $('#graph-container').append('<canvas id = "results-graph"><canvas>');
   canvas = document.querySelector('#results-graph');

   ct = canvas.getContext('2d');
   ct.canvas.width = $('#graph').width(); // here we are resizing the new canvas element to parent width
   ct.canvas.height = $('#graph').height(); // here we are resizing the new canvas element to parent height
   var a = canvas.width/2;
   var b = canvas.height/2;

   ct.font = '12pt Calibri';
   ct.textAlign = 'Align Left';
   ct.fillText('left aligned text on the canvas', a, b);
};

Samual Sam

Published on 21-Mar-2018 06:29:08

• Related Questions & Answers
• Update HTML5 canvas rectangle on hover
• Mouse event not being triggered on HTML5 canvas? How to solve it?
• How to listen to Keydown-Events in a KineticJS-managed HTML5-Canvas?
• Can the HTML5 Canvas element be created from the Canvas constructor?
• How to clear Tkinter Canvas?
• Operators that cannot be overloaded in C++
• Functions that cannot be overloaded in C++
• What is the sequence of jQuery events triggered?
• Getting values from HTML5 Canvas to JavaScript
• How to bind events to Tkinter Canvas items?
• Drawing an image from a data URL to a HTML5 canvas
• How to draw a rectangle on HTML5 Canvas?
• How to center canvas in HTML5?
• Print a HTML5 canvas element
• Translating HTML5 canvas