Community X.

Connect with other creators, share ideas, give feedback and get the latest product updates.

Nov 27, 2020
Edited: Nov 28, 2020

Can't get my javascript function to be applied to my uploaded image.

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.


<script src="">


<h1> upload image</h1>

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



<input type="file"


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



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


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


function upload(){

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

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

image = new SimpleImage(fileinput);



function makeGray(){

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

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





function makeRed(){

for (var pixel of image.values);{




var imgcanvas = document.getElementById("can")


1 answer1 reply

Hey there, can you please clarify, where are you trying to implement this code? Are you using it inside the editor x dev mode?

Nov 27, 2020Edited: Nov 27, 2020

Hello Ido! Thank for you for the quik response. I am using codepen website. Is this what you mean? Im not actually implementing it anywhere. Im just trying to get the code to work for practice.

Editor X

Design your boldest creations.