Chrome无法显示画布上绘制的图像

Question

我正在尝试显示画布上绘制的一些对象。 它在firefox中运行良好，但在chrome中，图像在画布下绘制。

在我的情况下，画布顶部有一个图像，我试图绘制一些形状。

请帮忙。

   <SCRIPT>
    var oImageBuffer = document.createElement('img');


    $(document).ready(function() {
        document.getElementById("semiAutoAdjustments").style.visibility = "hidden";
        checkProgress();

        setCanvas("ImageResultsCanvas");

        CanvasUtils.ImageBuffer = oImageBuffer;
        CanvasUtils.URLPrefix = "${ctx}/project/image?id=";
        CanvasUtils.LongAxis = 440;
        CanvasUtils.ShortAxis = 330;

        populateRecipes();

        changeCanvasImage("${selectedImageID}");                   
        InstantiateProcessedImage();

        setProcessedImage(m_oProcessedImage);
        RepaintCanvas();
    });

    function InstantiateProcessedImage()
    {
        <c:if test="${not empty selectedProcessImage.toogleProcessedImage}">
             var l_lImageId = "${selectedProcessImage.toogleProcessedImage.imageId}";
          var imageName = "${selectedProcessImage.toogleProcessedImage.imageName}";
             var i=0;var d=0;

             m_oProcessedImage = new ProcessedImage();
          m_oProcessedImage.ImageID = l_lImageId;

          var l_aJSMeasurements = new Array();
           <c:forEach var="measItem" varStatus="status" items="${selectedProcessImage.toogleProcessedImage.measurements}"> 
                var l_oMeasurement = new Measurement();
                 l_oMeasurement.Name = "${measItem.name}";
                 l_oMeasurement.Value = ${measItem.value};
                 l_oMeasurement.DefiningPoints = new Array();
                 <c:forEach var="definingPointsItem" varStatus="cnt" items="${measItem.definingPoints}"> 
                     l_oMeasurement.DefiningPoints[${cnt.index}] = new Pixel();
                     l_oMeasurement.DefiningPoints[${cnt.index}].x = ${definingPointsItem.x};
                     l_oMeasurement.DefiningPoints[${cnt.index}].y = ${definingPointsItem.y};
                 </c:forEach>
                 l_aJSMeasurements.push(l_oMeasurement);     
            </c:forEach>



            m_oProcessedImage.Measurements = l_aJSMeasurements;

            var l_aJSMeasurementBoxes = new Array();
         <c:forEach var="measBoxItem" varStatus="meanBoxCnt" items="${selectedProcessImage.toogleProcessedImage.measuredBoxes}"> 

                var l_oMeasuredImageBox = new MeasuredImageBox(); 
                l_oMeasuredImageBox.Region = new Box();
                l_oMeasuredImageBox.Region.UL = new Pixel();
                l_oMeasuredImageBox.Region.LR = new Pixel();
                l_oMeasuredImageBox.Region.UL.x = ${measBoxItem.region.ul.x};
                l_oMeasuredImageBox.Region.UL.y = ${measBoxItem.region.ul.y};
                l_oMeasuredImageBox.Region.LR.x = ${measBoxItem.region.lr.x};
                l_oMeasuredImageBox.Region.LR.y = ${measBoxItem.region.lr.y};

                l_oMeasuredImageBox.LayerBottoms = ${measBoxItem.layerBottoms};

                 l_oMeasuredImageBox.Measurements = new Array();
                  <c:forEach var="measFromMeasBoxItem" varStatus="measFromMeasBoxItemCnt" items="${selectedProcessImage.toogleProcessedImage.measuredBoxes[meanBoxCnt.index].measurements}"> 
                     var l_oMeasurement = new Measurement();
                     l_oMeasurement.Name = "${measFromMeasBoxItem.name}";
                     l_oMeasurement.Value = ${measFromMeasBoxItem.value};
                     l_oMeasurement.DefiningPoints = new Array();
                     <c:forEach var="measDefPtsFromMeasBoxItem" varStatus="measDefPtsFromMeasBoxItemCnt" items="${measFromMeasBoxItem.definingPoints}"> 
                        l_oMeasurement.DefiningPoints[${measDefPtsFromMeasBoxItemCnt.index}] = new Pixel();
                        l_oMeasurement.DefiningPoints[${measDefPtsFromMeasBoxItemCnt.index}].x = ${measDefPtsFromMeasBoxItem.x};
                        l_oMeasurement.DefiningPoints[${measDefPtsFromMeasBoxItemCnt.index}].y = ${measDefPtsFromMeasBoxItem.y};
                    </c:forEach>
                    l_oMeasuredImageBox.Measurements.push(l_oMeasurement);
                 </c:forEach>
                 l_aJSMeasurementBoxes.push(l_oMeasuredImageBox);

             </c:forEach>
             m_oProcessedImage.MeasuredBoxes = l_aJSMeasurementBoxes;

        </c:if>

    }

    function ProcessedImageFromDTO(p_oProcessImageDTO) {
        var l_oProcessedImage = new ProcessedImage();
        l_oProcessedImage.MeasuredBoxes = new Array();
        for (var iBox=0; iBox<p_oProcessImageDTO.measurementList.length; ++iBox) {

        }


        return l_oProcessedImage;
    }

    function getResults4Image(obj)
    {
        //alert(obj.id);
        var imageId = obj.id;
        //get selected recipe name
        var l_iSelectedRecipeIndex = document.getElementById("RecipeNameOptionsCB").selectedIndex
        var recipeName = document.getElementById("RecipeNameOptionsCB").children[l_iSelectedRecipeIndex].text;
        //refresh the page.
        getResults(imageId, recipeName);
    }




    function getResults(imageId, recipeName)
    {
        window.location.href = "${ctx}/viewer/processedImageResults?recipeName=" + recipeName + "&imageId=" + imageId;

    }

</SCRIPT>