<div>
<canvas id="canvas" width="256" height="256"  style="position: absolute;
top: 50px; left: 50px;">
Your browser does not support HTML5 Canvas.
</canvas>
</div>
</body>
</html>
As of this writing, you must run this application from a web server in
order to manipulate the local tanks_sheet.png file on the canvas. If you
are using the Safari or Firefox browser (version 5.1 and 19.02, respec‐
tively, as of this writing), you can test the application on a local drive
and it will function properly.
Copying from One Canvas to Another
The canvas allows us to use another canvas as the source of a bitmap drawing operation.
Let’s take a quick look at how we might utilize this functionality.
We will need to modify the base file for this chapter and create an extra <canvas> tag
in our HTML. We will name this extra <canvas> element canvas2. (It can be given any
ID as long as it is not the same ID as the first <canvas>.) Here is what our HTML <body>
will look like now:
<body>
<div>
<canvas id="canvas" width="256" height="256"  style="position: absolute;
top: 50px; left: 50px;">Your browser does not support HTML5 Canvas.</canvas>
<canvas id="canvas2" width="32" height="32"  style="position: absolute;
top: 256px; left: 50px;">Your browser does not support HTML5 Canvas.</canvas>
</div>
</body>
We will place the second <canvas> below the original and give it a width and height
of 32. We will also need to create a new context and internal reference variable for
canvas2. Here is the code that will be used to provide a reference to both <canvas>
elements:
if (!canvasSupport()) {
return;
}else{
var theCanvas = document.getElementById("canvas");
var context = theCanvas.getContext("2d");
var theCanvas2 = document.getElementById("canvas2");
var context2 = theCanvas2.getContext("2d");
Copying from One Canvas to Another  |  179
Pdf form save in reader - extract form data from PDF in C#.net, ASP.NET, MVC, Ajax, WPF
Help to Read and Extract Field Data from PDF with a Convenient C# Solution
extract data from pdf into excel; pdf data extraction
Pdf form save in reader - VB.NET PDF Form Data Read library: extract form data from PDF in vb.net, ASP.NET, MVC, Ajax, WPF
Convenient VB.NET Solution to Read and Extract Field Data from PDF
extracting data from pdf to excel; pdf form save in reader
}
Example 4-17 will use the tile sheet image from earlier examples and draw it to the first
canvas. It will then copy a 32×32 square from this canvas and place it on the second
canvas.
Example 4-17. Copying from one canvas to another
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CH4EX17: Canvas Copy</title>
<script src="modernizr.js"></script>
<script type="text/javascript">
window.addEventListener('load'eventWindowLoadedfalse);
function eventWindowLoaded() {
canvasApp();
}
function canvasSupport () {
return Modernizr.canvas;
}
function canvasApp(){
if (!canvasSupport()) {
return;
}else{
var theCanvas = document.getElementById("canvas");
var context = theCanvas.getContext("2d");
var theCanvas2 = document.getElementById("canvas2");
var context2 = theCanvas2.getContext("2d");
}
var tileSheet = new Image();
tileSheet.addEventListener('load'eventSheetLoaded , false);
tileSheet.src="tanks_sheet.png";
function eventSheetLoaded() {
startUp();
}
function startUp(){
context.drawImage(tileSheet00);
context2.drawImage(theCanvas320,32,32,0,0,32,32);
180  |  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
extract data from pdf; how to fill out a pdf form with reader
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
export pdf form data to excel; saving pdf forms in acrobat reader
}
}
</script>
</head>
<body>
<div>
<canvas id="canvas" width="256" height="256"  style="position: absolute;
top: 50px; left: 50px;"> Your browser does not support HTML5 Canvas.</canvas>
<canvas id="canvas2" width="32" height="32"  style="position: absolute;
top: 256px; left: 50px;">Your browser does not support HTML5 Canvas.</canvas>
</div>
</body>
</html>
Figure 4-18 shows the canvas copy functions in operation.
Figure 4-18. An example canvas copy operation
Canvas copy operations can be very useful when creating applications that need to share
and copy image data across multiple <div> instances on (and the Canvas object within)
a web page. For example, multiple Canvas elements can be spread across a web page,
and as the user makes changes to one, the others can be updated. This can be used for
fun applications, such as a “minimap” in a game, or even in serious applications, such
as stock portfolio charting and personalization features.
Copying from One Canvas to Another  |  181
C# PDF File Merge Library: Merge, append PDF files in C#.net, 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.
extract data from pdf c#; extracting data from pdf files
VB.NET PDF Page Delete Library: remove PDF pages in vb.net, 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
extract table data from pdf; how to flatten a pdf form in reader
Using Pixel Data to Detect Object Collisions
We can use the context.getImageData() function on two image objects to perform
pixel-level collision detection between the images.
As of this writing, you must run this application from a web server in
order to manipulate the local file image data on the canvas. If you are
using the Safari browser (version 5.1.7 as of this writing), you can test
the application on a local drive and it will function properly.
This is not a simple task, but it is ultimately straightforward. We must remember that
when we are using getImageData(), we are copying the color values from the actual
canvas and not the images themselves. For this reason, we cannot simply use the Image
object data as the source of our collision testing but must copy that data from the canvas
to a variable and then use that data in the collision check.
Visit the http://www.playmycode.com blog for further details about col‐
lision detection and other game related topics. This site was immensely
helpful in finding a decent algorithm for getImageData().
Testing the alpha value of each pixel against each pixel in two objects is an expensive
operation. So, we are going to first test to see whether our objects’ bounding boxes collide
before we start to test each pixel in each object. Here is the boundingBoxCollide()
function we will use. It is also used in Example 4-18, and in Chapter 8 and Chapter 9
when we create games for the Canvas:
function boundingBoxCollide(object1object2) {
var left1 = object1.x;
var left2 = object2.x;
var right1 = object1.x + object1.width;
var right2 = object2.x + object2.width;
var top1 = object1.y;
var top2 = object2.y;
var bottom1 = object1.y + object1.height;
var bottom2 = object2.y + object2.height;
if (bottom1 < top2return(false);
if (top1 > bottom2return(false);
if (right1 < left2return(false);
if (left1 > right2) return(false);
return(true);
182  |  Chapter 4: Images on the Canvas
C# PDF Page Extract Library: copy, paste, cut PDF pages in C#.net
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 type into a pdf form in reader; pdf data extraction open source
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
using pdf forms to collect data; exporting pdf form to excel
}
As you can see, this function takes in two parameters. These are the two logical objects
that we want to test the collision on. As long as the object instances include xy,
width, and height attributes, the function will perform properly. First let’s examine the
objects that we are going to test collisions on.
The Colliding Objects
We are going to use two PNG image files as the design for our objects. They will both
be 48-pixel by 48-pixel images. The first will be a blue plus sign, and the second will be
a red circle with a round “bite” taken out of it. Figure 4-19 shows the drawing objects
for our pixel-level collision detection.
Figure 4-19. The drawing objects for our pixel-level collision detection
We will create two objects to hold the data for these images:
var blueObject={};
var redObject={};
blueObject.x=0;
blueObject.y=200;
blueObject.dx=2;
blueObject.width=48;
blueObject.height=48;
blueObject.image=new Image();
blueObject.image.src="blueplus.png";
redObject.x=348;
redObject.y=200;
redObject.dx=-2;
redObject.width=48;
redObject.height=48;
redObject.image=new Image();
redObject.image.src="redcircle.png";
Using Pixel Data to Detect Object Collisions  |  183
C# PDF Convert to Tiff SDK: Convert PDF to tiff images in C#.net
Description: Convert to DOCX/TIFF with specified zoom value and save it into stream. Parameters: zoomValue, The magnification of the original PDF page size.
flatten pdf form in reader; extract data from pdf using java
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 to excel online; can reader edit pdf forms
We also need to draw each of the two images to the Canvas briefly and store the Image
Data value for each:
context.drawImage(blueObject.image00);
blueObject.blueImageData=context.getImageData(00blueObject.width
blueObject.height);
context.clearRect(0,0,theCanvas.widththeCanvas.height);redObject.x=348;
context.drawImage(redObject.image00);
redObject.redImageData=context.getImageData(00redObject.width
redObject.height);
context.clearRect(0,0,theCanvas.widththeCanvas.height);
We draw at 0,0 for ease of use, but these could be drawn on a second hidden canvas or
anywhere on the current canvas. We want to erase them right after we place them because
we need to store only the pixel color data for each. Specifically, we will be using every
fourth item in the array of pixel data. This is the transparency value of the pixel.
How We Will Test Collisions
We will employ a simple setTimeout loop to move these objects closer and closer to‐
gether. As the bounding boxes of each collide, our code will then drop into an algorithm
that will test the alpha value on each pixel at the overlap between the objects. If this
alpha value is not 0, we know that the objects have collided.
Checking for Intersection Between Two Objects
After we have detected that we have a bounding box collision, we can simply loop
through all of the pixels in each ImageData set, find the ones that match, and then check
to see whether the alpha value for that pixel is 0. The problem with this approach is that
it is slow and pretty much unusable for objects larger than a few pixels in width and
height. Our 48×48 pixel images are each composed of 2,304 individual pixels. That is
far too many to loop through on each frame tick, even for a single collision test. What
we are going to do first is find where the two bounding boxes for our objects intersect
and then check only those pixels.
Figure 4-20 shows an area of intersection where there would be a pixel-based collision.
184  |  Chapter 4: Images on the Canvas
C# PDF Convert to Word SDK: Convert PDF to Word library in C#.net
key. Quick to remove watermark and save PDF text, image, table, hyperlink and bookmark to Word without losing format. Powerful components
extract pdf data to excel; extracting data from pdf forms to excel
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:
how to fill pdf form in reader; pdf data extraction
Figure 4-20. The area where a pixel based collision will take place
To check the pixels in only the area of intersection rather than the entire set of pixels in
each object, we need to first find this area of intersection. We will accomplish this by 
using the Math.min and Math.max Javascript functions on the current object positions
and their associated widths and heights:
var xMin = Math.maxblueObject.xredObject.x );
var yMin = Math.maxblueObject.yredObject.y );
var xMax = Math.minblueObject.x+blueObject.widthredObject.x+redObject.width );
var yMax = Math.minblueObject.y+blueObject.heightredObject.y+redObject.height
Based on the locations of the two objects and the width (or height, depending on the
axis), these will give us four values needed to define the area in intersection.
xMin and yMin give us the location of the top-left corner of the intersection, and xMax
and yMax give us the bottom-right corner of the intersection.
The next step is to create a nested loop where we iterate though all the horizontal (x)
values in the intersection and through each vertical pixel (y). At each of these points,
we find the transparency value for the pixel in each object at that point and compare it
to 0.
The pixelX loop
for ( var pixelX = xMinpixelX < xMaxpixelX++ )
Next we create a nested loop for the y positions in the intersection area.
Using Pixel Data to Detect Object Collisions  |  185
The nested pixelY loop
for ( var pixelY = yMinpixelY < yMaxpixelY++ )
When we have both a pixelX value and pixelY value, we need to find the transparency
value for that pixel in each of our objects. Remember that ImageData objects are simply
a single-dimensional array of four numbers for each pixel in the image. So, every fourth
number in the array is the transparency value for a pixel. Therefore, the transparency
value for a single pixel in our array will be found by using the following steps:
1. Subtract the current x value of our object from the current pixelX value.
2. Add the result of subtracting the current y of our object from the current pixelY
value to the result in step 1.
3. Multiply the new value by 4 (because a pixel is every four values in our array).
4. Add 3 to this to find the transparency value.
It sounds complicated, but the code to find the red and blue object pixels comes out
looking like this:
var bluepixel = ((pixelX-blueObject.x ) + (pixelY-blueObject.y )
*blueObject.width )*4 + 3 ;
var redpixel = ((pixelX-redObject.x+ (pixelY-redObject.y)
*redObject.width)*4 + 3 ;
The collision check
When we have the transparency value for both pixels, to see whether they collide is a
simple matter of making sure that both bluepixel and redpixel in our ImageData
arrays for the objects are both not 0:
if (( blueObject.blueImageData.data [ bluepixel ] !== 0 ) 
&&redObject.redImageData.data [ redpixel ] !== 0 )) {
console.log("pixel collision")
blueObject.dx=0;
redObject.dx=0;
break;
}
We have added a console log message and have set both of our objects’ dx values to 0 so
that they will stop on impact. Figure 4-21 shows the result of this collision.
186  |  Chapter 4: Images on the Canvas
Figure 4-21. The result on the Canvas of a pixel collision based impact
All of the code for this example
Example 4-18 contains the entire set of code needed to test out collisions, based on pixel
color transparency values.
Example 4-18. Testing pixel collisions with color transparency values
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chapter 4 Example 18: Pixel Collisions</title>
<script src="modernizr.js"></script>
<script type="text/javascript">
window.addEventListener('load'eventWindowLoadedfalse);
function eventWindowLoaded() {
canvasApp();
}
function canvasSupport () {
return Modernizr.canvas;
}
function canvasApp(){
if (!canvasSupport()) {
return;
}else{
var theCanvas = document.getElementById('canvas');
var context = theCanvas.getContext('2d');
}
var blueObject={};
var redObject={};
Using Pixel Data to Detect Object Collisions  |  187
blueObject.x=0;
blueObject.y=200;
blueObject.dx=2;
blueObject.width=48;
blueObject.height=48;
blueObject.image=new Image();
blueObject.image.src="blueplus.png";
context.drawImage(blueObject.image00);
blueObject.blueImageData=context.getImageData(00blueObject.width,
blueObject.height);
context.clearRect(0,0,theCanvas.widththeCanvas.height);
redObject.x=348;
redObject.y=200;
redObject.dx=-2;
redObject.width=48;
redObject.height=48;
redObject.image=new Image();
redObject.image.src="redcircle.png";
context.drawImage(redObject.image00);
redObject.redImageData=context.getImageData(00redObject.width
redObject.height);
context.clearRect(0,0,theCanvas.widththeCanvas.height);
function drawScreen() {
blueObject.x+=blueObject.dx;
redObject.x+=redObject.dx;
context.clearRect(0,0,theCanvas.widththeCanvas.height);
context.drawImage(blueObject.imageblueObject.x, blueObject.y);
context.drawImage(redObject.imageredObject.x, redObject.y);
console.log("redObject.redImageData.data[3]=" +
redObject.redImageData.data[3]);
if (boundingBoxCollide(blueObject, redObject)){
console.log("bounding box collide");
var xMin = Math.max( blueObject.x, redObject.x );
var yMin = Math.max( blueObject.y, redObject.y );
var xMax = Math.min( blueObject.x+blueObject.width,
redObject.x+redObject.width );
var yMax = Math.min( blueObject.y+blueObject.height,
redObject.y+redObject.height );
for ( var pixelX = xMinpixelX < xMaxpixelX++ ) {
for ( var pixelY = yMinpixelY < yMaxpixelY++ ) {
188  |  Chapter 4: Images on the Canvas
Documents you may be interested
Documents you may be interested