
- Javascript Basics Tutorial
- Javascript - Home
- Javascript - Overview
- Javascript - Syntax
- Javascript - Enabling
- Javascript - Placement
- Javascript - Variables
- Javascript - Operators
- Javascript - If...Else
- Javascript - Switch Case
- Javascript - While Loop
- Javascript - For Loop
- Javascript - For...in
- Javascript - Loop Control
- Javascript - Functions
- Javascript - Events
- Javascript - Cookies
- Javascript - Page Redirect
- Javascript - Dialog Boxes
- Javascript - Void Keyword
- Javascript - Page Printing
- JavaScript Objects
- Javascript - Objects
- Javascript - Number
- Javascript - Boolean
- Javascript - Strings
- Javascript - Arrays
- Javascript - Date
- Javascript - Math
- Javascript - RegExp
- Javascript - HTML DOM
- JavaScript Advanced
- Javascript - Error Handling
- Javascript - Validations
- Javascript - Animation
- Javascript - Multimedia
- Javascript - Debugging
- Javascript - Image Map
- Javascript - Browsers
- JavaScript Useful Resources
- Javascript - Questions And Answers
- Javascript - Quick Guide
- Javascript - Functions
- Javascript - Resources
Draw part of an image inside HTML5 canvas
If you want to draw part of an image inside canvas, the image onload function only fires once when the image first loads into the browser.
Let us see the example:
$(document).ready(function () { var cw1 = 200; var ch1 = 300; var ctx1 = $("#myCanvas")[0].getContext("3d"); var myImg1 = new Image(); myImg1.src = "http://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); });
- Related Articles
- Load image from url and draw to HTML5 Canvas
- HTML5 drawImage() method to draw image onto the canvas
- Display video inside HTML5 canvas
- How to draw an oval in HTML5 canvas?
- Change colour of an image drawn on an HTML5 canvas element.
- How to draw an SVG file on an HTML5 canvas?
- Draw Bezier Curve with HTML5 Canvas
- Draw a shadow with HTML5 Canvas
- How to draw lines using HTML5 Canvas?
- Create a text inside circles in HTML5 Canvas
- Drawing an image from a data URL to a HTML5 canvas
- How to draw large font on HTML5 Canvas?
- How to draw a rectangle on HTML5 Canvas?
- How can I display an image inside SVG circle in HTML5?
- Is HTML5 canvas and image on polygon possible?

Advertisements