Υποενότητα 10.1: Στοιχείο HTML Canvas

Εικόνα στο Canvas

Μπορούμε επίσης να προσθέσουμε και να επεξεργαστούμε εικόνες σε καμβά.

Ο κώδικας JavaScript για να επιτευχθεί αυτό είναι:

/*
* We create a Javascript Image object and set its source URL
* to the location of the image file we'll be inserting.
*/
var image0 = new Image();
image0.src = "images/chocolatethings.JPG";
/*
* Here's the handler that loads when the image has finished downloading.
*
* This needs to be asynchronous (triggered by the image load event) since we don't know how
* long the image will take to load.
*/
image0.onload = function(){
    /* draw the image in the canvas window */
    context1.drawImage(image0, 0, 0);
}

ο παραπάνω κώδικας θα δημιουργήσει έναν καμβά που εμφανίζεται ως εξής: