使用jQuery清空div的内容。 无法使其工作

Question

I use this example that allow me to draw into the canvas. http://devfiles.myopera.com/articles/649/example2.html

However, I want to have a button that clears the content of it. This is what I did without luck.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
      $("#clearme").click(function() {
       var view = $('#imageView');
       var context = view[0].getContext('2d');
       context.clearRect(550, 550, view.width(), view.height());
      });
    });

<a href="#" id="clearme">clear</a>

<div id="container">
      <canvas id="imageView" width="610" height="680">
      </canvas>
</div>

What am I missing here?

Answer 1

Clear the canvas via its API instead:

var view = $('#imageView');
var context = view[0].getContext('2d');
context.clearRect(0, 0, view.width(), view.height());

Answer 2

You have to clear the canvas, empty() is not what you're looking for. Do something like this:

var ctx = canvasEl.getContext('2d');
ctx.clearRect(0, 0, canvasEl.width, canvasEl.height);
ctx.beginPath();

Answer 3

Empty() wont clear a canvas. You'll have to use clearRect.