问如何将RGB值应用于HTML5画布？

EN

        <?php
          $decal = (array) getSingleDefinition('Decals', $group->detail->clanInfo->clanBannerData->decalId);
          $decalLink = array_values($decal);
          $primaryColor = (array) getSingleDefinition('DecalSecondaryColors', $group->detail->clanInfo->clanBannerData->decalBackgroundColorId);
          $primaryColorLink = array_values($primaryColor);
          $primaryColorRed = $primaryColorLink[0]->red;
          $primaryColorGreen = $primaryColorLink[0]->green;
          $primaryColorBlue = $primaryColorLink[0]->blue;
          $gonfalon = (array) getSingleDefinition('GonfalonDetails', $group->detail->clanInfo->clanBannerData->gonfalonDetailId);
          $gonfalonLink = array_values($gonfalon);
        ?>
        <canvas id="clanBanner" width="270" height="600">
        </canvas>
        <script>
          function loadImages(sources, callback) {
            var images = {};
            var loadedImages = 0;
            var numImages = 0;

            for(var src in sources) {
              numImages++;
            }
            for(var key in sources) {
              images[key] = new Image();
              createCanvas(sources[key]);

              images[key].onload = function() {
                if(++loadedImages >= numImages) {
                  callback(images);
                }
              };
              images[key].src = sources[key];
            }
          }
          var canvas = document.getElementById("clanBanner");
          var context = canvas.getContext("2d");


          var sources = {
            foreground: "http://www.bungie.net<?php echo $decalLink[0]->foregroundImagePath ?>",
            gonfalon: "http://www.bungie.net<?php echo $gonfalonLink[0]->foregroundImagePath ?>",
          };

          loadImages(sources, function(images) {
            context.drawImage(images.foreground, 4, 35, 270, 400);
            context.drawImage(images.gonfalon, 4, 55, 270, 400);
          });

          function createCanvas(source) {
            var img = new Image();
            img.src = source;
            img.onload = function() {
              draw(this);
            };

            var canvas = document.createElement("canvas");
            var context = canvas.getContext("2d");
            context.drawImage(img,0,0);
            img.style.display = "none";
            var imageData = context.getImageData(0,0,canvas.width,canvas.height);
            var data = imageData.data;
            if(source == sources.foreground){
              for(var i = 0; i < data.length; i += 4){
                data[i] = "<?php echo $primaryColorRed ?>";
                data[i + 1] = "<?php echo $primaryColorGreen ?>";
                data[i + 2] = "<?php echo $primaryColorBlue ?>";
              }
              context.putImageData(imageData, 0, 0);
            }
          }