Capt. Horatio T.P. Webb

HTML 5 -- CANVAS EXAMPLE #3 -- IMAGES

Parks -- Fall 2013

Methods:

name_for_the_canvas_context.drawImage(image,x,y);

x is the horizontal coordinate in pixels,
y is the horizontal coordinate in pixels,
image is EITHER:

For an image already loaded on the page yoiu can get the image object like this:
document.getElementById["id of the image"]
then use:
name_for_the_canvas_context.drawImage( document.getElementById["id of the image"], x , y);
You can load images into the javascript like this:
image_object_name = new Image();
image_object_name.src = local image filename OR URL with remote filename;

then
name_for_the_canvas_context.drawImage(image_object_name , x , y);

name_for_the_canvas_context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);

For clipping a part of an image and drawing the clipped portion on the canvas.

sx is the upper left-hand corner horizontal coordinate in pixels in the source image,
sy is the upper left-hand corner vertical coordinate in pixels in the source image,
sw is the horizontal width in pixels in the source image,
sh is the vertical height in pixels in the source image,
dx is the upper left-hand corner horizontal coordinate in pixels in the destination image,
dy is the upper left-hand corner vertical coordinate in pixels in the destination image,
dw is the horizontal width in pixels in the destination image,
dh is the vertical height in pixels in the destination image,

Here is a canvas for images:

<canvas id="img_example" width="620" height="1300"" style="border:solid blue 1px;"></canvas>

Here is the code:

//
// *** set canvas context
//

var imx = document.getElementById("img_example");
var imgc = imx.getContext("2d");
//
// *** load the 44 presidential images and names from
//     from the string "pres"
//
pres="George Washington*p1.jpg, ...many not shown... ,Barack H Obama*p44.jpg";
temp=pres.split(",");
i=0;
var image_array=[];
var pres_name_array=[];
for (i=0;i<44;i++)
    {
     var pdata=temp[i].split("*");
     image_array[i]=new Image();
     image_array[i].src=pdata[1];
     pres_name_array[i]=pdata[0];
    }
//
// *** place the presidential images in 9 rows and five columns
//
imgc.fontFamily="Arial";
imgc.fontWeight="lighter";
imgc.fontSize="10px";
i=0;
for (r=0;r<9;r++)
   {
   for (c=0;c<5;c++)
     {
      if (i<44)
         {
         imgc.drawImage(image_array[i],c*125+10,r*145);
         imgc.strokeText( (i+1).toString()+". "+pres_name_array[i],c*125+10,r*145+135)
         i++;
         }
     }
	 }

Here is a canvas for clipping and resizing an image:

<canvas id="cimg_example" width="300" height="260" style="border:solid blue 1px;"></canvas>

Here is the code:

//
//  *** second example of clipping and sizing
//
//  *** set the context and get the captain's image
//
var cimx = document.getElementById("cimg_example");
var cimgc = cimx.getContext("2d");
var cim = new Image();
cim.src="captsm.jpg";
//
// *** draw the original and the clipped expanded/reduced images
//
// *** original image at 10 pixels from the top and left
cimgc.drawImage(cim,10,10);
//
// *** original image at 10 pixels from the top and 120 from the left
//
cimgc.drawImage(cim,25,25,50,50,  120, 10,100,100);
//
// *** original image at 10 pixels from the top and left
//
cimgc.drawImage(cim,25,25,50,50,   10,150, 25,25);
//
// *** place the descriptive text under the images
//
cimgc.strokeText("original 100x100"                 , 10,120);
cimgc.strokeText("clipped the middle 50 x 50 square",120,120);
cimgc.strokeText("expanded to 100 x 100"            ,120,140);
cimgc.strokeText("clipped the middle 50 x 50 square", 10,190);
cimgc.strokeText("reduced to 25 x 25"               , 10,210);