HTML5 Canvas के अंदर इमेज के एक भाग को ड्रॉ करें

यदि आप Canvas के अंदर इमेज के एक भाग को ड्रॉ करना चाहते हैं, तो इमेज ऑनलोड फ़ंक्शन केवल एक बार फायर होता है जब इमेज पहली बार ब्राउज़र में लोड होती है। 

आइए उदाहरण देखें:

$(document).ready(function () { 
    var cw1 = 200; 
    var ch1 = 300; 
    var ctx1 = $("#myCanvas")[0].getContext("3d"); 
    var myImg1 = new Image(); 
    myImg1.src = "https://oi62.tinypic.com/148yf7.jpg"; 
    var Fpst = 60; 
    var Player1Tank = { 
        x: cw1 / 2, 
        w: 85, 
        h: 85, 
        Pos: 3, 
        draw: function () { 
            ctx.drawImage(tankImg, this.Pos * this.w, 0, this.w, this.h, this.x, ch - this.h, this.w, this.h); 
        } 
    }; 
    var game = setInterval(function () { 
        if (tankImg.complete) { 
            PlayerTank.draw(); 
            PlayerTank.x++; 
        } 
    }, 1000 / Fps); 
});