javascript - canvas怎么去除上一次行为

Question

这里我把图片转换成canvas
比如第一次点击裁切时图片计算到canvas的比例是:width="400",height="400"
然后清除了画板ctx.clearRect(0,0,canvas.width,canvas.height);
可是为什么换了图片以后再点裁切他会记住上一次的尺寸
当再次点击裁切后他才会去计算当前图片的比例
要怎么清除画板？

        <input type="button" value="裁切" />
        <p class="piclistbox"></p>
        <script type="text/javascript">
            $(function(){
                $("input:button").on("click",function(){
                    var img = new Image();
                    img.src = picUrl;//picUrl是可变换的Image图片
                    img.onload = function(){
                        var canvas = document.createElement("canvas");
                        var ctx = canvas.getContext("2d");
                        ctx.clearRect(0,0,canvas.width,canvas.height);
                        //比例
                        if(img.height>640){
                           img.width *= 640 / img.height;
                           img.height = 640;
                        }
                        if(img.width>640){
                           img.height *= 640 / img.width;
                           img.width = 640;
                        }
                        canvas.width = img.width;
                        canvas.height = img.height;
                        ctx.drawImage(imgbase64, 0,0,img.width,img.height);                            
                        $(".piclistbox").html(canvas);
                    }
                })
            })
        </script>

Answer 1

可以使用clearRect()方法清除画布
可以看看W3School
HTML5 canvas clearRect() 方法

Answer 2

你没设置canvas的高度和宽度，那么canvas默认宽是300px;高是150px;你画640宽或者是640高的图片，能画到画布里吗？