- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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);
};
Updated on 24-Jun-2020 13:45:44
- 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
- Execute a script when a context menu is triggered in HTML5?
Advertisements