Υποενότητα 10.3: Επεξεργασία εικόνας

Δημιουργία δεδομένων εικόνας

Η μέθοδος  createImageData() είναι μια μέθοδος που δημιουργεί ένα νέο αντικείμενο ImageData που είναι κενό. Αυτό το νέο αντικείμενο, από προεπιλογή, αποδίδει σε κάθε pixel του καμβά  τιμή RGBA = (0,0,0,0.0) -  διαφανές μαύρο.

Θα δημιουργήσουμε κενά δεδομένα εικόνας για 3 νέα στοιχεία καμβά:

<canvas id="myCanvas2" height="272" width="400"></canvas>
<canvas id="myCanvas3" height="272" width="400"></canvas>
<canvas id="myCanvas4" height="272" width="400"></canvas>

Θα τραβήξουμε εδώ τα στοιχεία καμβά και τα περιβάλλοντα γραφικών- graphics contexts:

var canvas2 = document.getElementById("myCanvas2"); 
var context2 = canvas2.getContext('2d'); 
var canvas3 = document.getElementById("myCanvas3"); 
var context3 = canvas3.getContext('2d'); 
var canvas4 = document.getElementById("myCanvas4"); 
var context4 = canvas4.getContext('2d');

var imgData2 = context2.createImageData(canvas2.width, canvas2.height);
var imgData3 = context3.createImageData(canvas3.width, canvas3.height);
var imgData4 = context4.createImageData(canvas4.width, canvas4.height);