We need an understanding  of HTML5 Canvas and the <canvas> tag. Please click here for a tutorial, and wait for instruction from Mr. Egler. The code below is for later use.
Our goal will be to make a page like the one shown below using only HTML and JavaScript code. However, it will be a smidge more difficult than inputting code in the KhanAcademy website.
The reason it was so easy to input JavaScript and see the output on the KhanAcademy website is because they used what is called an Applet. We don't have that luxury, and will have to display our JavaScript code by embedding it into a regular old HTML page. All we'll need is Notepad, an open browser and our wits.
We'll begin with a blank, "skeleton" html document. Copy the code below. Open Notepad and paste. Save Notepad document as JavaScriptTest.html. Make sure you select "All Files" when you save this to your class folder.













You will also need this picture file:
right click on it, Save Picture As a .jpg
file and name it: img_the_scream

You're saving everything to your class folder. Now proceed to next step.
<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>

</body>
</html>
In the header tag
<div align="center"><button onclick= "show_image('img_the_scream.jpg',220,277,'Scream');">Screamer</button></div>


placed before the canvas tag
<div align="center">


modified script tag
<script language="JavaScript" type="text/JavaScript">

placed after your image code
function show_image(src, width, height, alt) {
    var img = document.createElement("img");
    img.src = src;
    img.width = width;
    img.height = height;
    img.alt = alt;

    // This next line will just add it to the <body> tag
    document.body.appendChild(img);
}
Free Web Site Builder
Build a Free Website