context.clearRect(0, 0, canvas.width, canvas.height);
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: HTML5 Canvas</title>
<script type="text/javascript">
function loadcanvas(){
var canvas;
var context;
canvas = document.getElementById("mycanvas");
context = canvas.getContext("2d");
drawPath(context, "#000000");
var btnClearCanvas = document.getElementById("clearcanvas");
btnClearCanvas.onclick = btnClearCanvasListener;
function btnClearCanvasListener(){
context.clearRect(0, 0, canvas.width, canvas.height);
}
}
function drawPath(c, color){
c.fillStyle = color;
c.fillRect(100, 0, 50, 50); //( X, Y, WIDTH, HEIGHT)
}
</script>
</head>
<body onload="loadcanvas();">
<h1>Mobile-Web-App: HTML5 canvas</h1>
<canvas id="mycanvas" style="border: 5px solid;" width="400" height="350">
Sorry! Your browser doesn't support Canvas.
</canvas>
<form>
<input type="button" id="clearcanvas" value="Clear Canvas">
</form>
</body>
</html>
Related:
- HTML5 Canvas@((Context.(translate x rotate x scale)) + jQuery Slider)
No comments:
Post a Comment