The Note: This function should not be confused with the CSS
Note: This function should not be confused with the CSS
The width of the image (i.e., the value for the
The height of the image (i.e., the
value for the
The entire bitmap is loaded regardless of the sizes specified in the constructor. The size specified in the
constructor is reflected through the properties
This would be the equivalent of defining the following HTML tag inside the
BCD tables only load in the browser
Until now we have created our own shapes and
applied styles to them. One of the more exciting features of Importing images into a canvas is basically a two step process: Let's take a look at how to do this. The canvas API is able to use any of the following data types as an image source:
Until now we have created our own shapes and
applied styles to them. One of the more exciting features of
Importing images into a canvas is basically a two step process:
Let's take a look at how to do this.
The canvas API is able to use any of the following data types as an image source:
These are images created using the
These are images embedded using the
Using an HTML
You can use another
A bitmap image, eventually cropped. Such type are used to extract part of an image, a sprite, from a larger image
A special kind of
An image representing one single frame of a video.
There are several ways to get images for use on a canvas.
Using images from the same page
We can obtain a reference to images on the same page as the canvas by using one of:
Using images from other domains
Using other canvas elements
Just as with
normal images, we access other canvas elements using either the
One of the more practical uses of this would be to use a second canvas element as a thumbnail view of the other larger canvas.
Creating an image from scratch
Another option is to create new
When this script gets executed, the image starts loading.
If you try to call
If you're only using one external image this can be a good approach, but once you need to track more than one we need to resort to something more clever. It's beyond the scope of this tutorial to look at image pre-loading tactics, but you should keep that in mind.
Embedding an image via data: URL
Another possible way to include images is via the data: URL. Data URLs allow you to completely define an image as a Base64 encoded string of characters directly in your code.
Some disadvantages of this method are that your image is not cached, and for larger images the encoded URL can become quite long.
Using frames from a video
You can also use frames from a video being presented by a
This returns the
Once we have a reference to our source image object we can use the
Draws the image specified by the
Note: SVG images must specify a width and height in the root <svg> element.
Example: A simple line graph
In the following example, we will use an external image as the backdrop for a small line graph. Using backdrops can make your script considerably smaller because we can avoid the need for code to generate the background. In this example, we're only using one image, so I use the image
The resulting graph looks like this:
second variant of the
This adds the
Example: Tiling an image
In this example, we'll use an image as a wallpaper and repeat it several times on the canvas. This is done by looping and placing the scaled images at different positions. In the code below, the
Note: Images can become blurry when scaling up or grainy if they're scaled down too much. Scaling is probably best not done if you've got some text in it which needs to remain legible.
The resulting canvas looks like this:
The third and last variant of the
To really understand what this does, it may help to look at this image:
The first four parameters define the location and size of the slice on the source image. The last four parameters define the rectangle into which to draw the image on the destination canvas.
Slicing can be a useful tool when you want to make compositions. You could have all elements in a single image file and use this method to composite a complete drawing. For instance, if you want to make a chart you could have a PNG image containing all the necessary text in a single file and depending on your data could change the scale of your chart fairly easily. Another advantage is that you don't need to load every image individually, which can improve load performance.
Example: Framing an image
In this example, we'll use the same rhino as in the previous example, but we'll slice out its head and composite it into a picture frame. The picture frame image is a 24-bit PNG which includes a drop shadow. Because 24-bit PNG images include a full 8-bit alpha channel, unlike GIF and 8-bit PNG images, it can be placed onto any background without worrying about a matte color.
We took a different approach to loading the images this time. Instead of loading
them by creating new
The script itself is very simple. Each
Art gallery example
In the final example of this chapter, we'll build a little art gallery. The gallery consists of a table containing several images. When the page is loaded, a
In this case, every image has a fixed width and height, as does the frame that's drawn around them. You could enhance the script so that it uses the image's width and height to make the frame fit perfectly around it.
The code below should be self-explanatory. We loop through the
And here's some CSS to make things look nice:
Controlling image scaling behavior
As mentioned previously, scaling images can result in fuzzy or blocky artifacts due to the scaling process. You can use the drawing context's
How do I reference an image in HTML?
Use the HTML <img> element to define an image..
Use the HTML src attribute to define the URL of the image..
Use the HTML alt attribute to define an alternate text for an image, if it cannot be displayed..
How do I open an image in HTML?
Images can be easily inserted at any section in an HTML page. To insert image in an HTML page, use the <img> tags. It is an empty tag, containing only attributes since the closing tag is not required. Just keep in mind that you should use the <img> tag inside <body>…