Skip to content

Latest commit

 

History

History
44 lines (34 loc) · 1.15 KB

0201.md

File metadata and controls

44 lines (34 loc) · 1.15 KB

Canvasing the Area

HTML5

  • Redesign of HTML with a focus on making the more "modern" features of web browsers easy to work with
  • Designed around javascript and a standardized DOM
  • Includes built in support for audio and video playback
    • <audio> and <video>
  • Includes an element that can be drawn directly on
    • <canvas>

Canvas

  • HTML5 element that provides a drawing area
  • Javascript functions can draw onto a canvas element
    • You must declare in what context you are drawing
      • 3D drawing, 2D, raw bitmap, others...

Basic Canvas Operation

HTML

<canvas height="500" width="500" id="slate">
Any text here is only displayed if the canvas is not recognized by the browser.
</canvas>

Javascript

var canvas = document.getElementById("slate");
var ctx = canvas.getContext("2d");

// Draw 200x100 rectangle at (0, 100)
ctx.fillRect(0, 100, 200, 100);

// Set color of draw to "lightsteelblue"
ctx.fillStyle = "lightsteelblue";

// Draw 200x100 "lightsteelblue" rectangle at (0, 100)
ctx.fillRect(0, 100, 200, 100);
Notes
  • Origin is at the top left corner
  • No layering; canvas coordinates are overwritten