Drawing1 Example

Drawing2 Example -- Source Code

HTML Page -- index.htm

 <!DOCTYPE html>

<!-- Drawing2 Example 
Source code file: index.htm
Draw two shapes (circle and rectangle) using 
JavaScript to draw on a canvas. -->

<html>
    <head>
    <meta content="text/html; charset=utf-8" 
          http-equiv="Content-Type">
    <title>Drawing2 Example</title>
    <link rel="stylesheet" type="text/css" 
          href="styles.css">
    <script src="script.js"></script>
    </head>

    <body>
        <h1>Drawing2 Example</h1>

        <canvas id="myCanvas" width="300" height="300" />
        <script>
            window.load = init;
        </script>
    </body>
</html>

CSS Page -- styles.css

/* Drawing2 Example
   Source code file: styles.css
   Draw two shapes (circle and rectangle) using 
   JavaScript to draw on a canvas. */

body { background-color: #e0e0e0;
color: #000060; 
font-family: Verdana, Arial, sans-serif; }

canvas { border: 2px solid #000000; }

Script -- script.js

// Drawing2 Example
// Source code file: script.htm
// Draw two shapes (circle and rectangle) using JavaScript to 
// draw on a canvas.

function init( ) {

    // Create JavaScript objects for canvas 
    // and context.
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    // Draw circle.
    ctx.beginPath( );
    ctx.strokeStyle = "#0000FF";
    ctx.lineWidth = 4;
    ctx.arc(60, 60, 50, 0, 2.0 * Math.PI);
    ctx.stroke( ); 

    // Draw rectangle.
    ctx.fillStyle = "#FF0000"; 
    ctx.fillRect(150, 30, 70, 180);
    ctx.strokeRect(150, 30, 70, 180);
}