Как нарисовать изображение над другим изображением, используя холст

Question

Я работаю над построением точечных изображений над другим изображением с использованием холста. Я новичок в холсте; любезно назовите меня дальше.

Я принял img элемент и скопировал его на холсте. Теперь я пытаюсь поместить другое изображение поверх этого объекта canvas, но он не работает.

Это мой Fiddle.

HTML:

<p>Image to use:</p> 
<img id="scream" src="https://cdn3.iconfinder.com/data/icons/social-media-icons/32/Location-512.png" alt="The Scream" width="220" height="277"> 

<p>Canvas to fill:</p> 
<canvas id="myCanvas" width="250" height="300" 
style="border:1px solid #d3d3d3;"> 
Your browser does not support the HTML5 canvas tag.</canvas> 

<p><button id="button1">Copy Imange</button></p> 
<p><button id="button2">Draw OVer copied image</button></p> 

Код:

$("#button1").click(function(){ 
    var c = document.getElementById("myCanvas"); 
    var ctx = c.getContext("2d"); 
    var img = document.getElementById("scream"); 
    ctx.drawImage(img,10,10); 
    }); 

    $("#button1").click(function(){ 
    var c = document.getElementById("myCanvas"); 
    var ctx = c.getContext("2d"); 
    ctx.drawImage("https://cdn3.iconfinder.com/data/icons/social-media-icons/32/Location-512.png",10,10); 
    }); 

Answer 1

Есть несколько вопросов. Во-первых, вы нажимаете события, ищите элемент $("#button1"). Я предполагаю, что событие второго щелчка должно быть для $("#button2")

Следующая проблема: во втором событии click вы используете drawImage от URL-адреса изображения. Вы не можете сделать это напрямую, вам нужно создать новый образ и установить свойство источника следующим образом:

var img2 = new Image(); 
img2.src = 'https://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png'; 

Вы также не должны установить холст и контекст на каждый клик, вам нужно только сделать это один раз. Вот полный пример (working example):

$(document).ready(function(){  
    var c = document.getElementById("myCanvas"); 
    var ctx = c.getContext("2d"); 
    var img = document.getElementById("scream"); 
    var img2 = new Image(); 
    img2.src = 'https://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png'; 

    $("#button1").click(function(){ 
     ctx.drawImage(img,10,10); 
    }); 

    $("#button2").click(function(){ 
     ctx.drawImage(img2,10,10); 
    }); 
});