Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
How to actually work with HTML5 Canvas camera/viewport?
Working with an HTML5 Canvas camera/viewport allows you to display different portions of a larger game world or image. The camera/viewport acts like a window that shows only a specific region of your content, enabling features like scrolling backgrounds and following player characters.
Using drawImage() for Viewport Implementation
For viewport usage, use the drawImage() method with nine parameters to crop and display specific portions of your background image ?
<!DOCTYPE html>
<html>
<head>
<title>Canvas Viewport Example</title>
</head>
<body>
<canvas id="game" width="250" height="150"></canvas>
<script>
var canvas = document.getElementById("game");
var ctx = canvas.getContext("2d");
// Create a sample background
var background = new Image();
background.onload = function() {
// Clear the canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw viewport portion of background
// drawImage(image, cropLeft, cropTop, cropWidth, cropHeight, x, y, viewWidth, viewHeight)
ctx.drawImage(background, 50, 30, 350, 250, 0, 0, 250, 150);
};
background.src = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM4N0NFRUIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM5OEZCOTgiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgZmlsbD0idXJsKCNnKSIvPjx0ZXh0IHg9IjIwMCIgeT0iMTUwIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LXNpemU9IjI0IiBmaWxsPSJ3aGl0ZSI+TGFyZ2UgQmFja2dyb3VuZDwvdGV4dD48L3N2Zz4=";
</script>
</body>
</html>
Complete Game Example
For a more complete game implementation with viewport and game objects ?
<!DOCTYPE html>
<html>
<head>
<title>Canvas Game Viewport</title>
</head>
<body>
<canvas id="game" width="250" height="150" style="border: 1px solid black;"></canvas>
<script>
var myGame = document.getElementById("game");
var myCtx = myGame.getContext("2d");
// Create background
var background = new Image();
background.onload = function() {
// Clear canvas
myCtx.clearRect(0, 0, myGame.width, myGame.height);
// Draw background using viewport cropping
myCtx.drawImage(background, 50, 30, 350, 250, 0, 0, 250, 150);
// Draw game object (circle)
myCtx.beginPath();
myCtx.arc(130, 80, 12, 0, Math.PI * 2, false);
myCtx.closePath();
myCtx.fillStyle = "#FF6B6B";
myCtx.fill();
myCtx.strokeStyle = "#000";
myCtx.stroke();
};
background.src = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM4N0NFRUIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM5OEZCOTgiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgZmlsbD0idXJsKCNnKSIvPjx0ZXh0IHg9IjIwMCIgeT0iMTUwIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LXNpemU9IjE4IiBmaWxsPSJ3aGl0ZSI+R2FtZSBXb3JsZDwvdGV4dD48L3N2Zz4=";
</script>
</body>
</html>
The output of the above code displays a canvas with a cropped background image and a red circle representing a game object positioned at coordinates (130, 80).
Conclusion
HTML5 Canvas viewport implementation uses the nine-parameter drawImage() method to crop and display specific portions of larger images, enabling smooth camera movement and scrolling effects in web-based games.
806 Views
