buttonを二回押さないと、canvasに設定した画像が表示されない

前提・実現したいこと

前提：
このサイトを参考にcanvasに設定した画像をマウスで動かせるように作成した。

実現：
localにあるhtmlファイルを開いたとき、buttonを一度押すとcanvasに設定した画像を表示させたい。

対象ブラウザ：IE、chrome、FireFox

発生している問題

・htmlファイルを開いた直後のcanvasのサイズが300150で表示され、「canvasを表示」ボタンを押下するとcanvasのサイズが00となる。
もう一度「canvasを表示」ボタンを押下すると、設定したcanvasのサイズに変更され、画像が表示されて実現したい状態になる。

・対象ブラウザ全てでおきる。

該当のソースコード

html
1<!DOCTYPE html>
2<html>
3	<head>
4		<meta charset="utf-8">
5		<title>test</title>
6		<script src="js/test.js"></script>
7	</head>
8	<body>
9		<canvas id="canvas"></canvas>
10		<input type="button" value="canvasを表示" onclick="imagepreview();"/>
11	</body>
12</html>

javascript
1// test.js
2function imagepreview(){
3        var canvas  = document.getElementById('canvas');
4        var context = canvas.getContext('2d');
5        var isDragging = false;
6        var dragTarget = null; // ドラッグ対象の画像の添え字
7        var baseimg = new Image();
8        baseimg.src = 'img/sample_1.png';
9
10        // Canvasを画像のサイズに合わせる
11        canvas.height = baseimg.height;
12        canvas.width  = baseimg.width;
13
14        var srcs = [
15            'img/sample_1.png',
16            'img/icon1.png',
17            'img/icon2.png',
18        ];
19        var images = [];
20        for (var i in srcs) {
21            images[i] = new Image();
22            images[i].src = srcs[i];
23        }
24    
25        var loadedCount = 0;
26        for (var i in images) {
27            // images[i].addEventListener('load', function() {
28                if (++loadedCount == images.length) {
29                    var x = 0;
30                    var y = 0;
31                    var w = 0;
32                    var h = 0;
33                    for (var j in images) {
34                        images[j].drawOffsetX = x;
35                        images[j].drawOffsetY = y;
36                        w = images[j].width;
37                        h = images[j].height;
38                        images[j].drawWidth   = w;
39                        images[j].drawHeight  = h;
40    
41                        // 画像を描画
42                        context.drawImage(images[j], x, y, w, h);
43                        x += 50;
44                        y += 0;
45                    }
46                }
47            // }, false);
48        }
49    
50        // ドラッグ開始
51        var mouseDown = function(e) {
52            // ドラッグ開始位置
53            var posX = parseInt(e.clientX - canvas.offsetLeft);
54            var posY = parseInt(e.clientY - canvas.offsetTop);
55    
56            for (var i = images.length - 1; i >= 0; i--) {
57                // 当たり判定（ドラッグした位置が画像の範囲内に収まっているか）
58                if (posX >= images[i].drawOffsetX &&
59                    posX <= (images[i].drawOffsetX + images[i].drawWidth) &&
60                    posY >= images[i].drawOffsetY &&
61                    posY <= (images[i].drawOffsetY + images[i].drawHeight)
62                ) {
63                    dragTarget = i;
64                    isDragging = true;
65                    break;
66                }
67            }
68        }
69    
70        // ドラッグ終了
71        var mouseUp = function(e) {
72            isDragging = false;
73        };
74    
75        // canvasの枠から外れた
76        var mouseOut = function(e) {
77            // canvas外にマウスカーソルが移動した場合に、ドラッグ終了としたい場合はコメントインする
78            // mouseUp(e);
79        }
80    
81        // ドラッグ中
82        var mouseMove = function(e) {
83            // ドラッグ終了位置
84            var posX = parseInt(e.clientX - canvas.offsetLeft);
85            var posY = parseInt(e.clientY - canvas.offsetTop);
86    
87            if (isDragging) {
88                // canvas内を一旦クリア
89                context.clearRect(0, 0, canvas.width, canvas.height);
90    
91                var x = 0;
92                var y = 0;
93                var w = 150;
94                var h = 100;
95                for (var i in images) {
96                    if (i == dragTarget) {
97                        x = posX - images[i].drawWidth / 2;
98                        y = posY - images[i].drawHeight / 2;
99    
100                        // ドラッグが終了した時の情報を記憶
101                        images[i].drawOffsetX = x;
102                        images[i].drawOffsetY = y;
103                    } else {
104                        x = images[i].drawOffsetX;
105                        y = images[i].drawOffsetY;
106                    }
107                    w = images[i].drawWidth;
108                    h = images[i].drawHeight;
109    
110                    // 画像を描画
111                    context.drawImage(images[i], x, y, w, h);
112                }
113            }
114        };
115    
116        // canvasにイベント登録
117        canvas.addEventListener('mousedown', function(e){mouseDown(e);}, false);
118        canvas.addEventListener('mousemove', function(e){mouseMove(e);}, false);
119        canvas.addEventListener('mouseup',   function(e){mouseUp(e);},   false);
120        canvas.addEventListener('mouseout',  function(e){mouseOut(e);},  false);
121}