The website for this book contains only the files necessary to complete
the examples. We have modified Ari’s files to fit the needs of this book.
Figure 4-2 shows two copies of the image painted to the canvas. One of the copies has
the top-left starting location of 0,0, and the other starts at 50,50.
Figure 4-2. Draw multiple objects with a single source
Resizing an Image Painted to the Canvas
To paint and scale drawn images, we can also pass parameters into the drawImage()
function.  For  example,  this second  version of drawImage()  takes  in  an  extra  two 
dw and dh represent the width and height of the rectangle portion of the canvas where
our source image will be painted. If we want to scale the image to only 64×64 or 16×16,
we would use the following code:
Example 4-2 draws various sizes to the canvas.
Example 4-2. Resizing an image as it is drawn
function eventSheetLoaded() {
function drawScreen() {
Image Basics  |  139
Pdf form save in reader - extract form data from PDF in, ASP.NET, MVC, Ajax, WPF
Help to Read and Extract Field Data from PDF with a Convenient C# Solution
extract pdf form data to xml; extract data from pdf form
Pdf form save in reader - VB.NET PDF Form Data Read library: extract form data from PDF in, ASP.NET, MVC, Ajax, WPF
Convenient VB.NET Solution to Read and Extract Field Data from PDF
sign pdf form reader; extract table data from pdf
See Figure 4-3 for the output to this example.
Figure 4-3. Resizing an image as it is drawn
In Example 4-2, we have added a gray box so that we can better see the placement of
the images on the canvas. The image we placed on the screen can scale in size as it is
painted, saving us the calculation and steps necessary to use a matrix transformation
on the object. The only caveat is that the scale origin point of reference is the top-left
corner of the object. If we used a matrix operation, we could translate the origin point
to the center of the object before applying the scale.
We have placed two 32×32 objects on the canvas to show that these two function calls
are identical:
Aside from the fact that the second is placed 34 pixels below the first, the extra 32,32 at
the end of the second call is unnecessary because it is the original size of the object. This
demonstrates that the scale operation does not translate (or move) the object on any
axis. The top-left corner of each is 0,0.
Copying Part of an Image to the Canvas
The third set of parameters that can be passed into drawImage() allows us to copy an
arbitrary rectangle of data from a source image and place it onto the canvas. This image
data can be resized as it is placed.
We are going to use a second source image for this set of operations: spaceships that
have been laid out on what is called a tile sheet (also known as a sprite sheet, a texture
sheet, or by many other names). This type of file layout refers to an image file that is
140  |  Chapter 4: Images on the Canvas
C# PDF: PDF Document Viewer & Reader SDK for Windows Forms
SaveFile(String filePath): Save PDF document file to a specified path form (Here, we take a blank form as an open a file dialog and load your PDF document in
how to save a filled out pdf form in reader; extract data from pdf
VB.NET Image: How to Save Image & Print Image Using VB.NET
printing multi-page document files, like PDF and Word is used to illustrate how to save a sample RE__Test Public Partial Class Form1 Inherits Form Public Sub New
extract data from pdf file; extract data from pdf using java
broken up physically into rectangles of data. Usually these rectangles have an equal width
and height. The “tiles” or “sprites” we will be using are 32 pixels wide by 32 pixels high,
commonly referred to as 32×32 tiles.
Figure 4-4 shows a tile sheet with the grid lines turned on in the drawing application.
These grid lines separate each of the tiles on the sheet.
Figure 4-4. The tile sheet inside a drawing program
Figure 4-5 is the actual tile sheet—without grid lines—that we will use for our further
Figure 4-5. The tile sheet exported for use in an application
The structure of the parameters for this third version of the drawImage() function looks
like this:
sx and sy represent the “source positions” to start copying the source image to the
canvas. sw and sh represent the width and height of the rectangle starting at sx and sy.
That rectangle will be copied to the canvas at “destination” positions dx and dy. As with
the previous drawImage() function, dw and dh represent the newly scaled width and
height for the image.
Example 4-3 copies the second version of our spaceship (tile number 2) to the canvas
and positions it at 50,50. It also scales the image to 64×64, producing the result shown
in Figure 4-6.
Example 4-3. Using all of the drawImage() parameters
var tileSheet = new Image();
tileSheet.addEventListener('load'eventSheetLoaded , false);
tileSheet.src = "ships.png";
function eventSheetLoaded() {
Image Basics  |  141
C# PDF File Merge Library: Merge, append PDF files in, ASP.
Merge Microsoft Office Word, Excel and PowerPoint data to PDF form. Append one PDF file to the end of another and save to a single PDF file.
how to fill out a pdf form with reader; flatten pdf form in reader
VB.NET PDF Page Delete Library: remove PDF pages in, ASP.
this RasterEdge XDoc.PDF SDK, you can simply delete a single page from a PDF document using VB.NET or remove any page from a PDF document and save to local
pdf form save with reader; exporting data from pdf to excel
function drawScreen() {   //draw a background so we can see the Canvas edges
context.fillStyle = "#aaaaaa";
context.drawImage(tileSheet32, 0,32,32,50,50,64,64);
As you can see, we have changed the name of our Image instance to tileSheet because
it represents more than just the source for the single ship image.
Figure 4-6. Using all of the drawImage() parameters
Now let’s use this same concept to simulate animation using the tiles on our tile sheet.
Simple Cell-Based Sprite Animation
With a tile sheet of images, it is relatively simple to create what seems like cell-based or
flip-book animation. This technique involves rapidly swapping images over time to
simulate animation. The term flip-book comes from the age-old technique of drawing
individual cells of animation in the top-left corner pages of a book. When the pages are
rapidly flipped through, the changes are viewed over time, appearing to create a cartoon.
Cell-based animation refers to a similar professional technique. Individual same-sized
cells (or pages) of images are drawn to simulate animation. When played back rapidly
with special devices in front of a camera, animated cartoons are recorded.
We can use the drawImage() function and the first two tiles on our tile sheet to do the
same thing.
142  |  Chapter 4: Images on the Canvas
C# PDF Page Extract Library: copy, paste, cut PDF pages in
to extract single or multiple pages from adobe PDF file and save into a The portable document format, known as PDF document, is a widely-used form of file
how to fill in a pdf form in reader; extracting data from pdf files
C# Image: Save or Print Document and Image in Web Viewer
or image, you can easily save the changes to DLL Library, including documents TIFF, PDF, Excel, Word string fileName = Request.Form["saveFileName"]; string fid
extract data from pdf to excel; export pdf form data to excel
Creating an Animation Frame Counter
We can simulate the ship’s exhaust firing by rapidly flipping between the first two tiles
(or cells) on our tile sheet. To do this, we set up a counter variable, which is how we
track the tile we want to paint to the canvas. We will use 0 for the first cell and 1 for the
second cell.
We will create a simple integer to count which frame we are displaying on our tile sheet:
var counter = 0;
Inside drawScreen(), we will increment this value by 1 on each frame. Because we have
only two frames, we will need to set it back to 0 when it is greater than 1:
if (counter >1) {
counter = 0;
Or use the following nice shortcut. This is a “bit-wise” operation that will simplify code,
but we do not have the space to go into the full range of bit-wise operations in this text.
counter ^= 1;
Creating a Timer Loop
As it currently stands, our code will be called only a single time. Let’s create a simple
timer loop that will call the drawScreen() function 10 times a second, or once every
100 milliseconds. A timer loop that is set to run at a certain frame rate is sometimes
referred to as a frame tick or timer tick. Each tick is simply a single iteration of the timer
running all the code that we put into our drawScreen() function. We will also need a
function that starts the timer loop and initiates the tick after the image has preloaded
properly. We’ll name this function startUp():
function eventShipLoaded() {
function startUp(){
function gameLoop() {
Changing the Tile to Display
To change the tile to display, we can multiply the counter variable by 32 (the tile width).
Because we have only a single row of tiles, we don’t have to change the y value:
Simple Cell-Based Sprite Animation  |  143
C# PDF Convert to Tiff SDK: Convert PDF to tiff images in
Description: Convert to DOCX/TIFF with specified zoom value and save it into stream. Parameters: zoomValue, The magnification of the original PDF page size.
vb extract data from pdf; how to flatten a pdf form in reader
C# Create PDF from Tiff Library to convert tif images to PDF in C#
Description: Convert to PDF and save it on the disk. Parameters: Name, Description, Valid Value. Description: Convert to PDF and save it into stream. Parameters:
extract data from pdf into excel; extract data out of pdf file
We will examine how to use a tile sheet consisting of multiple rows and
columns in the next section, “Advanced Cell-Based Animation” on page
Example 4-3 used this same line of code to draw our image. In Example 4-4, it will be
placed on the canvas at 50,50 and scaled to 64×64 pixels. Let’s look at the entire set of
Example 4-4. A simple sprite animation
var counter = 0;
var tileSheet = new Image();
tileSheet.addEventListener('load'eventSheetLoaded , false);
tileSheet.src = "ships.png";
function eventSheetLoaded() {
function drawScreen() {
//draw a background so we can see the Canvas edges
context.fillStyle = "#aaaaaa";
if (counter >1) {
counter = 0;
function startUp(){
function gameLoop() {
When you run this code, you will see the exhaust on the ship turn off and on every 100
milliseconds, creating a simple cell-based animation.
144  |  Chapter 4: Images on the Canvas
C# PDF Convert to Word SDK: Convert PDF to Word library in
key. Quick to remove watermark and save PDF text, image, table, hyperlink and bookmark to Word without losing format. Powerful components
pdf data extraction to excel; extract data from pdf forms
C# Create PDF from PowerPoint Library to convert pptx, ppt to PDF
Description: Convert to PDF/TIFF and save it on the disk. Parameters: Description: Convert to PDF/TIFF and save it into stream. Parameters:
export excel to pdf form; extract pdf data to excel
Advanced Cell-Based Animation
In the previous example, we simply flipped back and forth between two tiles on our tile
sheet. Next, we are going to create a method that uses a tile sheet to play through a series
of images. First, let’s look at the new tile sheet, created by using tiles from SpriteLib.
Figure 4-7 shows the example sprite sheet, tanks_sheet.png; we will refer back to this
figure throughout the chapter.
Figure 4-7. Example tile sheet
As you can see, it contains a number of 32×32 tiles that can be used in a game. We will
not create an entire game in this chapter, but we will examine how to use these tiles to
create a game screen. In Chapter 9, we will create a simple maze-chase game using some
of these tiles.
Examining the Tile Sheet
The tile sheet is formatted into a series of tiles starting at the top left. As with a two-
dimensional array, the numbering starts at 0—we call this 0 relative. Moving from left
to right and down, each tile will be referenced by a single number index (as opposed to
a multidimensional index). The gray square in the top left is tile 0, while the tank at the
end of the first row (the rightmost tank) is tile 7. Moving down to the next row, the first
tank on the far left of the second row is tile 8, and so on until the final tile on row 3 (the
fourth row down when we start numbering at 0) is tile 31. We have four rows with eight
columns each, making 32 tiles with indexes numbered 0 to 31.
Creating an Animation Array
Next we are going to create an array to hold the tiles for the animation. There are two
tanks on the tile sheet: one is green and one is blue. Tiles 1‒8 are a series that—when
played in succession—will make it appear as though the green tank’s treads are moving.
Remember, the tile sheet starts at tile 0, but we want to start with the
first tank image at tile number 1.
Advanced Cell-Based Animation  |  145
We will store the tile IDs that we want to play for the tank in an array:
var animationFrames = [1,2,3,4,5,6,7,8];
We will use a counter to keep track of the current index of this array:
var frameIndex = 0;
Choosing the Tile to Display
We will use the frameIndex of the animationFrames array to calculate the 32×32 source
rectangle from our tile sheet that we will copy to the canvas. First, we need to find the
x and y locations of the top-left corner for the tile we want to copy. To do this, we will
create local variables in our drawScreen() function on each iteration (frame) to calcu‐
late the position on the tile sheet. The sourceX variable will contain the top-left corner
x position, and the sourceY variable will contain the top-left corner y position.
Here is pseudocode for the sourceX calculation:
sourceX = integer(current_frame_index modulo
the_number_columns_in_the_tilesheet* tile_width
The modulo (%) operator gives us the remainder of the division calculation. The actual
code we will use for this calculation looks like this:
var sourceX = Math.floor(animationFrames[frameIndex% 8*32;
The calculation for the sourceY value is similar, except we divide rather than use the
modulo operation:
sourceY = integer(current_frame_index divided by
Here is the actual code we will use for this calculation:
var sourceY = Math.floor(animationFrames[frameIndex/ 8*32;
Looping Through the Tiles
We will update the frameIndex value on each frame tick. When frameIndex becomes
greater than 7, we will set it back to 0:
if (frameIndex == animationFrames.length) {
frameIndex = 0;
The animationFrames.length value is 8. When the frameIndex is equal to 8, we must
set it back to 0 to start reading the array values over again, which creates an infinite
animation loop.
146  |  Chapter 4: Images on the Canvas
Drawing the Tile
We will use drawImage() to place the new tile on the screen on each iteration:
Here, we are passing the calculated sourceX and sourceY values into the drawImage()
function. We then pass in the width (32), the height (32), and the location (50,50) to
draw the image on the canvas. Example 4-5 shows the full code.
Example 4-5. Advanced sprite animation
var tileSheet = new Image();
tileSheet.addEventListener('load'eventSheetLoaded , false);
tileSheet.src = "tanks_sheet.png";
var animationFrames = [1,2,3,4,5,6,7,8];
var frameIndex = 0;function eventSheetLoaded() {
function drawScreen() {
//draw a background so we can see the Canvas edges
context.fillStyle = "#aaaaaa";
var sourceX = Math.floor(animationFrames[frameIndex% 8*32;
var sourceY = Math.floor(animationFrames[frameIndex/ 8*32;
if (frameIndex ==animationFrames.length) {
function startUp(){
function gameLoop() {
When we run the example, we will see the eight tile cell frames for the tank run in order
and then repeat—the only problem is that the tank isn’t going anywhere. Let’s solve that
little dilemma next and drive the tank up the screen.
Advanced Cell-Based Animation  |  147
Moving the Image Across the Canvas
Now that we have the tank treads animating, let’s “move” the tank. By animating the
tank treads and applying a simple movement vector to the tank’s position, we can achieve
the simulation of animated movement.
To do this, we first need to create variables to hold the current x and y positions of the
tank. These represent the top-left corner where the tile from our sheet will be drawn to
the canvas. In the previous examples, this number was set at 50 for each, so let’s use that
value here as well:
var x = 50;
var y = 50;
We also need a movement vector value for each axis. These are commonly known as
deltaX (dx) and deltaY (dy). They represent the “delta” or “change” in the x or y axis
position on each iteration. Our tank is currently facing in the “up” position, so we will
use −1 for the dy and 0 for the dx:
var dx = 0;
var dy = 1;
The result is that on each frame tick, our tank will move one pixel up on the y-axis and
zero pixels on the x-axis.
Inside drawScreen() (which is called on each frame tick), we will add the dx and dy
values to the x and y values, and then apply them to the drawImage() function:
y = y+dy;
x = x+dx;
Rather than use the hardcoded 50,50 for the location of the drawImage() call on the
canvas, we have replaced it with the current x,y position. Let’s examine the entire code
in Example 4-6.
Example 4-6. Sprite animation and movement
var tileSheet = new Image();
tileSheet.addEventListener('load'eventSheetLoaded , false);
tileSheet.src = "tanks_sheet.png";
var animationFrames = [1,2,3,4,5,6,7,8];
var frameIndex = 0;
var dx = 0;
var dy = -1;
var x = 50;
var y = 50;
function eventSheetLoaded() {
148  |  Chapter 4: Images on the Canvas
Documents you may be interested
Documents you may be interested