canvasに複数の画像を重ねる方法

###前提・実現したいこと
メインのcanvasに描画した横長の画像をdivタグでラッピングしてスクロール可能としています。
メインの画像の左右をそれぞれコピーして別のcanvasに描画します。
divタグで定義したラッパーの左右に上記のcanvas2つを配置し
スクロールしても左右の枠は常に表示されるようにしたいです。

<メインの横長画像>

html/cssもコピペ程度の知識しかないのですが、canvas初心者というのもあり
そもそもこのようなことが実現できるのかも分かっておりません。

###発生している問題・エラーメッセージ
左側のピンク部分はスクロールしても常に表示するようにできたのですが
右側がうまくいきません。

###該当のソースコード

html
1<!DOCTYPE html>
2<html>
3<head>
4    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5    <title>Canvas Demo</title>
6    <meta charset="utf-8" />
7    <style type="text/css">
8        .mainWrapper {
9            position: relative;
10        }
11
12        .mainWrapper > #mainCanvas, #leftCanvas {
13            position: absolute;
14            left: 0;
15            top: 0;
16            pointer-events:none;
17        }
18        
19        .maintWrapper > #rightCanvas {
20            position: absolute;
21            left: 550;
22            top: 0;
23            pointer-events:none;
24        }
25
26        .mainAreaWrapper {
27            width: 600px;
28            overflow-x: scroll;
29    </style>
30
31    <script type="text/javascript">
32        function draw() {
33        var canvas = document.getElementById('mainCanvas');
34
35        if (!canvas || !canvas.getContext) {
36            return false;
37        }
38        var context = canvas.getContext('2d');
39        
40        var img = new Image();
41        
42        img.onload = function onImageLoad() {
43            // all.pngを描画
44            context.drawImage(img, 0, 0);
45
46            // mainCanvasの左50px(ピンクの部分)をleftCanvasに描画し、mainAreaWrapperの左端に配置
47            var sourceCanvas = document.getElementById('mainCanvas'),
48                targetElement = document.getElementById("leftCanvas"),
49                sourceElement = document.getElementById("mainCanvas"),
50                targetCtx = targetElement.getContext("2d");
51
52            targetCtx.canvas.width = 50;
53            targetCtx.canvas.height = 300;
54            targetCtx.drawImage(sourceCanvas, 0, 0);
55
56        }
57        
58        img.src = 'all.png';
59        }
60
61    </script>
62</head>
63<body onload="draw()" style="background-color:#D0D0D0;">
64    <div>Canvas Demo</div>
65    <div class="mainWrapper">
66        <div class="mainAreaWrapper">
67            <!-- all.pngを表示するCanvas -->
68            <canvas id="mainCanvas" height="300" width="1200"></canvas>
69        </div>
70
71        <!-- mainCanvasの左50pxを描画するcanvasです -->
72        <canvas id="leftCanvas" height="300" width="0"></canvas>
73        <!-- mainCanvasの右50pxを描画するcanvasです -->
74        <canvas id="rightCanvas" height="300" width="0"></canvas>
75    </div>
76</body>
77</html>

###試したこと
ソースのdrow関数のonImageLoad関数内で以下のようにやってみましたがダメでした

javaScript
1// mainCanvasの右50px(オレンジの部分)をrightCanvasに描画し、mainAreaWrapperの右端に配置
2var targetElement2 = document.getElementById("rightCanvas"),
3    targetCtx2 = targetElement.getContext("2d");
4
5    targetCtx2.canvas.width = 50;
6    targetCtx2.canvas.height = 300;
7    targetCtx2.drawImage(sourceCanvas, 550, 0, 50, 300, 550, 0, 50, 300);*/
8