The Note: This function should not be confused with the CSS
Parameters
The width of the image (i.e., the value for the height Optional The height of the image (i.e., the
value for the Usage note The entire bitmap is loaded regardless of the sizes specified in the constructor. The size specified in the
constructor is reflected through the properties Examples
This would be the equivalent of defining the following HTML tag inside the
Specifications
Browser compatibilityBCD 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: HTMLImageElement These are images created using the SVGImageElement These are images embedded using the
HTMLVideoElement Using an HTML HTMLCanvasElement You can use another ImageBitmap A bitmap image, eventually cropped. Such type are used to extract part of an image, a sprite, from a larger image OffscreenCanvas A special kind of VideoFrame 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 pageWe can obtain a reference to images on the same page as the canvas by using one of:
Using images from other domainsUsing the Using other canvas elementsJust 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 scratchAnother 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: URLAnother 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.
One advantage of data URLs is that the resulting image is available immediately without another round trip to the server. Another potential advantage is that it is also possible to encapsulate in one file all of your CSS, JavaScript, HTML, and images, making it more portable to other locations. 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 videoYou can also use frames from a video being presented by a
This returns the Drawing imagesOnce we have a reference to our source image object we can use the drawImage(image, x, y) Draws the image specified by the Note: SVG images must specify a width and height in the root <svg> element. Example: A simple line graphIn 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
object's
The resulting graph looks like this: ScalingThe
second variant of the drawImage(image, x, y, width, height) This adds the Example: Tiling an imageIn 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
first 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: SlicingThe third and last variant of the drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) Given an 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 imageIn 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 exampleIn 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:
Tying it all together is the JavaScript to draw our framed images:
Controlling image scaling behaviorAs 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 you reference an image in JavaScript?In JavaScript, get a reference to the image tag using the querySelector() method. Then, assign an image URL to the src attribute of the image element.
Can JavaScript display images?JavaScript is known as the web development language. By using JavaScript, we can make our web page attractive by inserting images into it. By default, we use the <img> tag in HTML to display images. In the <img> tag, we have a method known as src , which helps get the source of the image that we gave to display.
How do I reference an image in HTML?Chapter Summary. 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>…
|