HTML5 Canvas कैमरा/व्यूपोर्ट के साथ वास्तव में कैसे काम करें?

व्यूपोर्ट उपयोग के लिए drawImage()

व्यूपोर्ट उपयोग के लिए, drawImage() मेथड का उपयोग करें।

ctx.clearRect(0,0,game.width,game.height); // एक फुल बैकग्राउंड इमेज
ctx.drawImage(background, cropLeft, cropTop, cropWidth, cropHeight, 0, 0, viewWidth, viewHeight);

गेम के लिए

var myGame = document.getElementById("game");
var myCtx = myGame.getContext("2d");
myCtx.clearRect(0,0,game.width,game.height);
// drawImage() मेथड का उपयोग
myCtx.drawImage(background, left, top, 350, 250, 0, 0, 250, 150);
myCtx.beginPath();
myCtx.arc(130, 80, 12, 0, Math.PI*2, false);
myCtx.closePath();
myCtx.fill();
myCtx.stroke();

drawImage() का 9-पैरामीटर संस्करण व्यूपोर्ट क्रॉपिंग और स्केलिंग को सक्षम बनाता है।