Image
Méthode : Récupérer une image
const image = document.querySelector('img');
Méthode : Dessiner une image
ctx.drawImage(...)
ctx.drawImage(image, x, y);
x, y : coordonnées du coin haut gauche de l'image dans le canvas.
ctx.drawImage(image, x, y, largeur, hauteur);
largeur, hauteur : largeur et hauteur de l'image dans le canvas
ctx.drawImage(image, sx, sy, sLargeur, sHauteur, x, y, largeur, hauteur);
sx, sy : coordonnées du coin haut gauche de l'image source à partir desquelles la copie est faite.
sLargeur, sHauteur : largeur et hauteur de la partie découpée de l'image source.
Méthode : Récupérer des Pixels d'un canvas
ctx.getImageData(...)
const pixels = ctx.getImageData(x, y, largeur, hauteur);
x, y : coordonnées du coin haut gauche de la partie du canvas que l'on veut récupérer.
largeur, hauteur : largeur et hauteur de la partie du canvas que l'on veut récupérer.
Méthode : Afficher des Pixels
ctx.putImageData(...)
ctx.putImageData(pixels, x, y);
x, y : coordonnées du coin haut gauche de l'image dans le canvas.
ctx.putImageData(pixels, x, y, sx, sy, sLargeur, sHauteur);
sx, sy : coordonnées du coin haut gauche de l'image source à partir desquelles la copie est faite.
sLargeur, sHauteur : largeur et hauteur de la partie découpée de l'image source.
Méthode : Modifier les pixels
pixels.data retourne la liste des pixels sous forme d'un tableau (Uint8ClampedArray).
Chaque pixel occupe quatre cases du tableau avec une valeur de 0 à 255. Ces cases représentent la proportion de Rouge, Vert, Bleu et la valeur Alpha.
let data = pixels.data;
for(let i=0; i<data.length; i = i + 4){
console.log("R:" + data[i] + " V:" + data[i+1] + " B:" + data[i+2] + " A:" + data[i+3] + "\n");
}