Canvas Basics


    <!DOCTYPE html>
    <html>
     <head>
      <meta charset="utf-8"/>
      <script>
        function draw() {
          var canvasEl = document.getElementById("canvas-element");
          if (canvasEl.getContext) {
            var canvas = canvasEl.getContext("2d");

            canvas.fillStyle = "rgb(200,0,0)";
            canvas.fillRect (10, 10, 110, 100);

            canvas.fillStyle = "rgba(0, 0, 200, 0.5)";
            canvas.fillRect (60, 60, 110, 100);
          }
        }
      </script>
     </head>
     <body onload="draw();">
       <canvas id="canvas-element" width="150" height="150">
        A translucent blue rectangle overlapping a red rectangle.
       </canvas>
     </body>
    </html>