Why doesn't my function show in html page?

Question

How can I fix this problem ?

window.onload=function setup(){

    createCanvas(200,200);
}

window.onload=function draw (){
    background(55);
}

I included the javascript file in the html page when I run html page does not show my canvas is there a syntax error ?

`is there a syntax error` there is, if that's your whole code. What does createCanvas & background do? — Keith, Oct 31 '18 at 22:16
Is this your complete code? Do the developer tools (console) show any errors/exceptions? — quant, Oct 31 '18 at 22:22
This html page this too js file window.onload = function() { createCanvas(200,200); background(55); }; — Sky Blue, Oct 31 '18 at 22:23

score 1 · Accepted Answer · answered Oct 31 '18 at 22:19

1

You can't have two window.onload functions. Every time you assign this property it replaces the previous one. When the page loads, only the last one will be called.

You can combine the functions into one:

window.onload = function() {
    createCanvas(200,200);
    background(55);
};

Or you can use addEventListener to add multiple event listeners.

window.addEventListener("load", function() {
    createCanvas(200, 200);
});
window.addEventListener("load", function() {
    background(55);
});

answered Oct 31 '18 at 22:19

Barmar

741,623
53
500
612

I tried first but doesn't working – Sky Blue Oct 31 '18 at 22:22
Is it doing the `background(55)`? – Barmar Oct 31 '18 at 22:23
just white page – Sky Blue Oct 31 '18 at 22:26
doesnt canvas show – Sky Blue Oct 31 '18 at 22:26
What kind of debugging have you tried? Have you added a breakpoint to the function, or added `console.log` statements? – Barmar Oct 31 '18 at 22:28
This console error Uncaught ReferenceError: createCanvas is not defined at window.onload (main.js:2) – Sky Blue Oct 31 '18 at 22:31
1

You're trying to call a function that you never defined. Define the `createCanvas` function. – Barmar Oct 31 '18 at 22:33
I wrote this window.onload = function() { createCanvas(200,200); background(55); }; and gave this error – Sky Blue Oct 31 '18 at 22:35
2

But do you have `function createCanvas(height, width) { ... }` anywhere? You can't call a function that you haven't defined. – Barmar Oct 31 '18 at 22:37
Just there is that codes in js file – Sky Blue Oct 31 '18 at 22:38
1

`createCanvas` is not a built-in JavaScript function. So you either need to define it yourself or load a library that defines it. – Barmar Oct 31 '18 at 22:41
like createElement('canvas') and then call this – Sky Blue Oct 31 '18 at 22:43
1

@SkyBlue It sounds like you need to do some more research and maybe read some JavaScript tutorials. Here is an example of how to create a canvas element and insert it into the document: https://stackoverflow.com/questions/10652513/html5-dynamically-create-canvas. You are missing a lot of code. – Turnip Oct 31 '18 at 22:48
Okay thanks for helps – Sky Blue Oct 31 '18 at 22:51

Why doesn't my function show in html page?

1 Answers1