- Trending Categories
- Data Structure
- Operating System
- C Programming
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to actually work with HTML5 Canvas camera/viewport?
For viewport usage, use the drawImage() method.
ctx.clearRect(0,0,game.width,game.height); // a full background image ctx.drawImage(background,cropLeft,cropTop,cropWidth,cropHeight, 0,0,viewWidth,viewHeight);
For the game −
var myGame = document.getElementById("game"); var myCtx= myGame.getContext("2d"); myCtx.clearRect(0,0,game.width,game.height); // using drawImage() method 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();
- Enable rear camera with HTML5
- How to work with Camera in an Android App?
- HTML5 meta name = “viewport” doesn't work as expected
- How to use images with HTML5 canvas?
- How to work with Camera in an Android App using Kotlin?
- How to customize the viewport of the canvas using FabricJS?
- What HTML5 File.slice method actually doing?
- Drop Shadow with HTML5 Canvas
- How to handle mousedown and mouseup with HTML5 Canvas
- How to draw a Bezier Curve with HTML5 Canvas?
- How to center canvas in HTML5?
- Create a pattern with HTML5 Canvas
- Draw Bezier Curve with HTML5 Canvas
- Draw a shadow with HTML5 Canvas
- Blending two images with HTML5 canvas