javascript - キャンバスに画像をアップロードして要素を追加する

Question

こんばんは、

そこで、PCからキャンバスに画像をアップロードする必要があり、画像がそこにあるときに、キャンバスで使用できる画像に要素を追加する必要があります。

私がこれまでに得たのは、キャンバスにドラッグ可能な要素 ( example ) で、コード コードは次のとおりです。

<script type="text/javascript">
    contador = 0; 
    function start(e) {
        e.dataTransfer.effecAllowed = 'copyMove'; 
        e.dataTransfer.setData("Data", e.target.id); 
        e.dataTransfer.setDragImage(e.target, 10, 10); 
        e.target.style.opacity = '0.4'; 
    }

    function end(e){
        e.target.style.opacity = '';            
        e.dataTransfer.clearData("Data");
    }

    function enter(e) {
        e.target.style.border = '3px dotted #555'; 
    }

    function leave(e) {
        e.target.style.border = ''; 
    }

    function over(e) {
        var elemArrastrable = e.dataTransfer.getData("Data"); 
        var id = e.target.id; 


        if (id == 'cuadro1'){
            return false; 
        }

        if (id == 'cuadro2'){
            return false; 
        }   



        if (id == 'papelera')
            return false; 

    }




    function drop(e){

        var elementoArrastrado = e.dataTransfer.getData("Data"); 
        e.target.appendChild(document.getElementById(elementoArrastrado));
        e.target.style.border = ''; 
        tamContX = $('#'+e.target.id).width();
        tamContY = $('#'+e.target.id).height();

        tamElemX = $('#'+elementoArrastrado).width();
        tamElemY = $('#'+elementoArrastrado).height();

        posXCont = $('#'+e.target.id).position().left;
        posYCont = $('#'+e.target.id).position().top;

        x = e.layerX;
        y = e.layerY;

        if (posXCont + tamContX <= x + tamElemX){
            x = posXCont + tamContX - tamElemX;
        }

        if (posYCont + tamContY <= y + tamElemY){
            y = posYCont + tamContY - tamElemY;
        }

        document.getElementById(elementoArrastrado).style.position = "absolute";
        document.getElementById(elementoArrastrado).style.left = x + "px";
        document.getElementById(elementoArrastrado).style.top = y + "px";
    }

    function eliminar(e){
        var elementoArrastrado = document.getElementById(e.dataTransfer.getData("Data")); 
        elementoArrastrado.parentNode.removeChild(elementoArrastrado); 
        e.target.style.border = '';   
    }


    function clonar(e){
        var elementoArrastrado = document.getElementById(e.dataTransfer.getData("Data")); 

        elementoArrastrado.style.opacity = ''; 

        var elementoClonado = elementoArrastrado.cloneNode(true); 
        elementoClonado.id = "ElemClonado" + contador; 
        contador += 1;  
        elementoClonado.style.position = "static";  
        e.target.appendChild(elementoClonado); 
        e.target.style.border = '';   
    }


</script>

ここで、画像をキャンバスにアップロードするための優れた例を見てきました ( http://jsfiddle.net/influenztial/qy7h5/ ) が、画像のアップロードをキャンバスに結合し、この同じ画像に要素を追加するスクリプトをどのように組み合わせることができますか?

どんな助けでも大歓迎です。