Холст DrawImage не не работает, ошибок нет вообще

Question

здесь код

 function drawImg() { 


          var canvas = document.getElementById('mask'); 
          var context = canvas.getContext('2d'); 

          var img = new Image(); 
          //alert(img.src); 
          img.src = "http://localhost/photo/webs.png"; 

          img.onload = function(){ 

            context.drawImage(img, 100, 100); 

            var URL = canvas.toDataURL(); 
            document.getElementById('main').src = URL; 
          }; 



        } 

и HTML-код

  <img id="main" src="main.png" /> 
     <canvas class="mask" id="mask" width='200' height='200'></canvas> 

     <p rel="32,223,95" onclick="drawImg()" title="Green">Green</p> 

Изображение загружается, подтверждается. но не привязывание к холсту.

Answer 1

Canvas:

var c = document.getElementById("myCanvas"); 
 
var ctx = c.getContext("2d"); 
 
var img = document.getElementById("scream"); 
 
ctx.drawImage(img, 10, 10);

<p>Image to use:</p> 
 
<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277"> 
 

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

Answer 2

попробуйте использовать этот:

Сценарий:

function drawImg() { 
    var img = new Image(); 
    //alert(img.src); 
    img.src = "home.png"; 
    console.log(img); 
    if(img.complete) { //check if image was already loaded by the browser 
      callback(img); 
     }else { 
      img.onload = callback; 
     } 


} 
var callback = function(img) { 

    var canvas = document.getElementById('mask'); 
    var context = canvas.getContext('2d'); 
    context.drawImage(img, 100, 100); 
     var URL = canvas.toDataURL(); 
     console.log(URL); 
     document.getElementById('main').src = img.src; 
    } 

HTML:

<img id="main" src="main.png" /> 
     <canvas class="mask" id="mask" width='200' height='200'></canvas> 

     <p rel="32,223,95" onclick="drawImg()" title="Green">Green</p>