Compositing example

MDN Learn
#1

From the page path: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing/Example/#Compositing_example :
I typed out all the code to create the Compositing example on my code editor but when I open the file where I stored the code in the browser, the only thing which shows on my browser screen is the text, “source-over”.
The instructions to create the Compositing example aren’t completely clear about where the separate blocks of code should be placed in the code editor.
Should the separate blocks of code be stacked on top of one another? Or should the separate blocks of code be nested inside the window.onload = function() {}?
(Also, I suspect some functions may be missing from the window.onload = function() {}.)

#2

Hello @Andrew_Rea

could you post your full code on any of a the sharing site and have a nice day

#3

Here is the code in Codepen: https://codepen.io/andrewsrea/pen/ExyPWmK?editors=1000

#4

Hello @Andrew_Rea

there was misstyping in that line

you write this

var pattern = proto.createPattern(proto.ccanvas, 'repeat');

while it should be

var pattern = proto.createPattern(proto.canvas, 'repeat');

there extra c at the begning of the canvas word

to detect thos type of error inspect the result panel in the codepen then open the console it will help you know what is going on

hope that help and have a nice day :slight_smile:

#5

@justsomeone, ugh! I can’t believe that! I looked over that code over and over. But I always seem to get tripped up by some little syntactical error like that. My stupid keyboard seems to have its “s” and “c” keys stuck where they always put double "c"s and "s"s on the screen.
Well, thank you very much for taking a look at my code! And you have a nice day, too! :slightly_smiling_face:

#6

you very welcome @Andrew_Rea

it always happen that why it always good thing to have another eye cause sometime our brain stuck and keep thinking that it checked everything while it did not

another thing you can try to use text editor or ide it will help you a lot with those kind of error and also other things

and thanks a lot :slight_smile: