HTML and CSS Reference
In-Depth Information
context.fillStyle = "rgba(0,0,255,.4)";
<h1> Simple Transforms </h1>
<canvas id="canvas" width="400" height="300">
<strong> Canvas Supporting Browser Required </strong>
Using Bitmaps in Drawings
A very interesting feature of canvas is the ability to insert images into the drawing There
are several ways to do this, but let's start with the most basic, drawImage( img , x , y ) , which
takes an image object and the coordinates for where the image should be placed. The image
will be its natural size when called in this manner. You can use drawImage( img , x , y , w , h )
if you need to modify the image size and set the width and height.
The actual image passed in to the drawImage() method can come from a few places.
It can be
An image already loaded on the page
Dynamically created through the DOM
Another canvas object
An image created by setting its src to a data: URL
The important thing to remember is that the image must be loaded by the time canvas
is ready to access it. This may require use of the onload function for the image:
var img = new Image();
img.onload = function(){
img.src = "dog.jpg";
The last way that drawImage( img , sx , sy , sw , sh , dx , dy , dw , dh ) may be called allows
a part of the image to be cut out and drawn to the canvas . The ( sx , sy ) coordinates are the
location on the image, and sw and sh are the width and height, respectively. The rest of the
parameters prefixed with d are the same as in the previous form of the method.
var img = document.getElementById("image1");
/* slices a 100px square from image1 at location (200,75)
Places on the canvas at (50,50) and stretches it to 300px square. */
Search WWH ::

Custom Search