Clear canvas button in Javascript/HTML not working
Question
So my code displays an html page with some text on it and then below that I have a "clear Canvas" button which I would like to have clear the canvas once pushed and then be able to draw on this blank canvas. My clear canvas button isn't working, it isn't doing anything once pushed. I'm using a call back in order to perform the canvas clear and the html file is connected to a javascript file which then draws things on the new cleared canvas. The first code here is the.html file with the canvas that is being cleared that also has the.js file joined to it.
I tried context.Rect(x, y, w, h); and canvas.width.canvas.width; and neither seem to work. I'm using Chrome
<html><head></head>
<h3> </h3>
<body >
<canvas id="main" width="300" height="500"></canvas>
<script>
var canvas = document.getElementById("main");
var context = canvas.getContext('2d');
context.fillStyle = "#008000";
context.rect(0,0,300,300);
context.fill();
</script>
</body></html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="user-scalble=no,initial-scale=1.0,maximum-scale=1.0" />
<style>
body { padding:10px; margin:0px; background-color: #FF9; }
#main { margin: 10px auto 0px auto; }
</style>
<script src=".js"></script>
</head>
<body >
<button id="clear">Clear Canvas</button><br>
<canvas id="main" width="300" height="500"></canvas>
</body>
</html>
//end of .html file
// JavaScript Document
// wait until window is fully loaded into browser
window.onload = function()
{
// so smart phone does not move/resize image when touched
document.ontouchmove = function(e)
{
e.preventDefault();
}
var canvas = document.getElementById('main');
// Number of pixels used by the Clear button above canvas
var canvasTop = canvas.offsetTop;
var context = canvas.getContext('2d');
var lastX, lastY;
context.strokeStyle = #FA8072;
context.lineCap = 'round';
context.lineJoin = 'round';
context.lineWidth = 8;
context.fill();
// Function to Clear the Canvas
function clear()
{
context.fillStyle = 'blue'
context.rect( 0, 0, 300, 500);
context.fill();
}
// Function Dot (to start a new line or just a point)
function dot(x,y)
{
context.beginPath();
context.fillStyle = '#D2691E';
// draw tiny circle
context.arc(x,y,1,0, Math.PI*2, true);
context.fill();
context.closePath();
}
// Handle the Clear button
var clearButton = document.getElementById('clear');
// set callback funct. clear()for future touch events
clearButton.onclick = clear;
clear(); // do a clear canvas now
} // end window.onload
1 answers
solution1
0 2012-07-24 00:38:33
You've got a typo on this line:
context.strokeStyle = #FA8072;
You need quotes:
context.strokeStyle = '#FA8072';
With that fixed it seems to work: http://jsfiddle.net/eMSXU/
(By the way, you might like to press the "Tidy Up" button in the fiddle to see how your code should've been indented...)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.