I am interested in creating a JavaScript function called addborder(y) that will add a yellow border to an image. This experiment aims to explore the process of manipulating images using JavaScript.
<!--HTML-->
<img id="img" src="http://pre01.deviantart.net/3d38/th/pre/f/2012/298/5/a/dubstep_wallpaper_by_theblazia-d5iwj4c.png" alt="boom boom boom" >
<p id="here"></p>
<Script>
var y = document.getElementById("img"); //Storing "img" element as variable y.
function addborder(x) {
for (var pixel of x.values()) {
//Loop through image pixels and change border to yellow
if (
pixel.getX() < 50 ||
pixel.getX() > x.getWidth() - 50 ||
pixel.getY() < 200 ||
pixel.getY() > x.getHeight() - 50
) {
pixel.setRed(255);
pixel.setGreen(255);
pixel.setBlue(255);
}
}
document.getElementById("here").innerHTML = x; //Display modified image in paragraph
//Is a return statement necessary?
}