IT. Expert System.

HTML

Drawing Images


Drawing Images

Images can be drawn using the drawImage() method. The image must already be loaded for it to be drawn, therefore it is best to put the drawing code in the image's onload() event handler.

The following example shows the basic use of the drawImage() method:

var img = new Image();
img.onload = function() {
    c.drawImage(img,10,10);
}

img.src = 'chrome-32x32.png';

This code produces the following result:


The drawImage() method has several variations that can be used to stretch and slice images.

One variation allows adjusting the drawing size of the image by adding width and height arguments to the function.

The following example stretches the image to twice its regular size:

var img = new Image();
img.onload = function() {
    c.drawImage(img,10,10,64,64);
}

img.src = 'chrome-32x32.png';

This code produces the following result:


Note: Images can become blurry when scaling up or grainy if they're scaled down too much. This is especially true if the image contains text. Be aware of this when using drawimage() with scaling.

Another variation allows selection of a sub-rectangle within the source image, in addition to the location and size of the target image. This allows the drawing of just portions of the image to the Canvas, stretched and placed however specified. Using this form of drawImage() is useful for fast image clipping, often found in scrolling platform video games.

The following example uses the top-left quarter of the image and draws it at regular size, then the bottom-right quarter of the image and draws it at twice its size:

var img = new Image();
img.onload = function() {

  c.drawImage(img,
    0,0,15,15,  //source
    10,10,16,16 //dest
    );

  c.drawImage(img,
    16,16,16,16, //source
    26,26,32,32 //dest
    );
}

img.src = 'chrome-32x32.png';

This code produces the following result:

Browser Support

The following table lists the attributes / methods related to this section and their browser compatibility:

  Firefox IE Chrome Opera Safari
Attributes / Methods          
drawImage()


Content

Android Reference

Java basics

Java Enterprise Edition (EE)

Java Standard Edition (SE)

SQL

HTML

PHP

CSS

Java Script

MYSQL

JQUERY

VBS

REGEX

C

C++

C#

Design patterns

RFC (standard status)

RFC (proposed standard status)

RFC (draft standard status)

RFC (informational status)

RFC (experimental status)

RFC (best current practice status)

RFC (historic status)

RFC (unknown status)

IT dictionary

License.
All information of this service is derived from the free sources and is provided solely in the form of quotations. This service provides information and interfaces solely for the familiarization (not ownership) and under the "as is" condition.
Copyright 2016 © ELTASK.COM. All rights reserved.
Site is optimized for mobile devices.
Downloads: 316 / 158693031. Delta: 0.04252 с