Prev Demo
HTML5
>
Clear Canvas
Next Demo
Write code here
J
|
B
|
A
<!DOCTYPE html> <html> <head> <title>Clear Canvas</title> </head> <body> <h2 style="color:green">Press the button to clear the canvas rectangle</h2> <canvas id="myCanvas" width="300" height="180"></canvas> <div> <input type="button" id="clear" value="Clear"> </div> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); context.beginPath(); context.rect(18, 50, 200, 100); context.fillStyle = "red"; context.fill(); context.lineWidth = "20"; context.strokeStyle = "pink"; context.stroke(); document.getElementById('clear').addEventListener('click', function () { context.clearRect(0, 0, canvas.width, canvas.height); }, false); </script> </body> </html>
Note: We DO NOT save your trial code in our database.
Output
