jquery和canvas元素的问题

下面是我的代码:

$('#add_shape').click(function() {
                            var rectHeight = $('#rect_height_input').val();
                            var WidthOrRadius = $('#widthorradius').val();
                            $('<canvas>').attr({
                                id:'canvas'                             
                            }).css({
                                height:function() {
                                    if (rectHeight > 0) {
                                        return rectHeight + 'px';
                                    }
                                    else {
                                        return WidthOrRadius + 'px';
                                    }
                                },
                                width:WidthOrRadius + 'px'
                            })
                            .appendTo('#work_area');
                                var canvas = document.getElementById('canvas');
                                var ctx = canvas.getContext('2d');                              
                                ctx.fillStyle = $('#color_list option:selected').val();
                                ctx.fillRect(0, 0 , WidthOrRadius, rectHeight);
});

此代码适用于jsfiddle(这里:http://jsfiddle.net/dzejkej/xwg5f/)，但不适用于我的浏览器。我不知道怎么了。有人能帮忙吗?