Im a complete beginner, im taking a online course from duke university (english is not my native tongue). I am doing a mini project and I have to create several buttons that alter an uploaded image to a website.

However i have written a few functions that alter the image already earlier in the program. But now I have to connect them with the HTML code to the canvas and such and I can't get it to work. I have 1 function that is working which is the makeGray function but i've tried others and none of them work, either i get errors or the image simply doesnt change. So right now the makeGray function works but makeRed doesn't.

HTML:

<script src="https://www.dukelearntoprogram.com/course1/common/js/image/SimpleImage.js">

</script>

<h1> upload image</h1>

<canvas id="can"></canvas>

<p>

filename:

<input type="file"

multiple="false"

accept="image/*" id="finput"

onchange="upload()">

</p>

<input type="button" value="make gray"

onclick="makeGray()";>

<input type="button" value="red filter" onclick="makeRed()";>

Javascript:

function upload(){

var imgcanvas = document.getElementById("can");

var fileinput = document.getElementById("finput");

image = new SimpleImage(fileinput);

image.drawTo(imgcanvas);

}

function makeGray(){

for (var pixel of image.values()){

var avg = (pixel.getRed() + pixel.getGreen() + pixel.getBlue())/3;

pixel.setRed(avg);

pixel.setGreen(avg);

pixel.setBlue(avg);

}

function makeRed(){

for (var pixel of image.values);{

pixel.setRed(200);

}

}

var imgcanvas = document.getElementById("can")

image.drawTo(imgcanvas);