Enter your Sign on user name and password.

Forgot password?
Sign In | Sign Up
Start learning today, and be successful in your academic & professional career. Start Today!

Use Chrome browser to play professor video
Brenton Strine

Brenton Strine

The Canvas Element

Slide Duration:

Table of Contents

I. HTML
Your First Web Page

17m 1s

Intro
0:00
World Wide Web
0:23
Introduction to HTML
0:25
Looking at Source Code
0:53
HTML5
1:58
HTML5 Specification
1:59
Creating a Web Page
4:10
What You Will Need to Create a Web Page
4:11
Example: Basic Web Page
4:40
Example: Creating a Web Page
5:46
HTML Elements
6:33
Adding a Title
7:08
Main Body
7:48
First Level Heading
8:23
Adding an Image
8:42
Paragraph
9:09
Adding a List and URLs
11:13
Footer
14:09
CSS: Styling
16:02
Web Basics and Web History

32m 23s

Intro
0:00
The Web
0:56
Overview of the Web
0:58
The Web Page
2:39
Overview of the Web Page
2:40
Web Technologies
4:45
Overview of Web Technologies
4:46
The Web Today
9:22
The Web Today
9:23
What is HTML
11:22
HyperText Markup Language
11:23
The Creation of the Internet
12:40
History of the Internet
12:41
Developments in HTML
14:10
The Birth of HTML
14:11
Early Problems
15:35
Early Browsers
16:24
History of Early Browsers
16:25
NCSA Mosaic
17:55
NCSA Mosaic
17:56
The Browser Wars Begin
19:39
History of the Browser Wars
19:40
Casualties of War
22:27
Results of the Browser Wars
22:28
HTML 4 Stabilization
25:31
History and Overview of HTML4
25:32
Modern Browser Developments
27:27
Modern Browsers
27:29
HTML5
30:57
Overview of HTML5
30:58
Web Development Tools

26m 28s

Intro
0:00
Browsers
0:17
Introduction to Browsers
0:18
Example: Browsers
2:35
Firefox Add-ons
3:14
Firefox Browser
3:15
Example: Firebug Add-ons
3:54
Example: Web Developer Toolbar and ColorZilla
7:51
Domain Names and Hosting
10:23
Overview of Domain Names and Hosting
10:24
Your Own Domain
11:03
Installing a Local Web Server
12:42
Installing a Local Web Server
12:43
Apache Web
13:29
WYSIWYG Editors
15:56
Introduction to WYSIWYG Editors
15:57
Content Management System
18:31
How Content Management System Works
18:32
Example: WordPress
20:00
File Transfer Protocol
22:26
File Transfer Protocol
22:27
HTML Elements and Attributes

21m 50s

Intro
0:00
Proper use of Elements and Attributes
0:14
Elements and Attributes
0:16
Example
1:06
Normal HTML Elements
2:00
Start Tag, Content, and End Tag
2:02
Example: Warning!
2:34
Void HTML Elements
3:23
Self-Closing Tags
3:24
List of Void Elements
4:04
Example: Line Break
5:00
HTML Comments
6:13
Purpose of Comment Tags
6:14
Example: Comment Tags
6:50
Attributes
7:25
Properties of Attributes
7:27
Example: Attributes
7:39
Example: Whitespace
10:22
HTML Character Codes
12:05
Character References
12:07
Example: Registered Trademark Symbol
12:35
Example: Using Character References
13:23
Example: Start Tag and End Tag
15:57
Example: Self-Closing Tag
16:37
Example: Attributes
17:37
Example: Proper use of Elements and Attributes
19:02
Example: Comment
20:09
Example: Whitespace
20:46
Essential Tags Part 1

41m 42s

Intro
0:00
Document Structure Tags
1:13
Document Structure Tags and Example
1:14
Layout Tags
3:24
Layout Tags
3:26
Example: Layout Tags
7:48
Example: Layout Tags
11:28
Example: Layout Tags
13:17
Example: Layout Tags
14:22
Text Level Tags
17:22
Text Level Tags
17:23
Example: Text Level Tags
17:48
Grouping Content Tags
24:23
Grouping Content Tags
24:24
<p> Tag
24:45
<hr> Tag
25:31
<figure>, <figcaption>, and <blockquote> Tag
26:14
<div> Tag
26:58
Example: Grouping Content Tags
27:28
Embedded Content Tags
33:12
Embedded Content Tags
33:13
Example: Embedded Content Tags
35:39
Essential Tags Part 2

24m 20s

Intro
0:00
Simple Tables
0:17
Simple Tables
0:19
Example: Simple Tables
2:31
Semantic Tables
5:11
Semantic Tables
5:14
Example: Semantic Tables
6:24
Simple Lists
8:14
Simple Lists
8:18
Unordered List
8:36
Ordered List
8:42
Example: Simple Lists
9:37
Definition Lists
14:08
Definition Lists
14:09
Example: Definition Lists
15:21
Forms
17:11
Forms
17:12
Example: Forms
17:52
Markup Language

29m 38s

Intro
0:00
HTML 1 Through 3.2
0:13
Period of Rapid Growth of HTML
0:14
Tag Soup
2:03
Definition of Tag Soup
2:04
Example: Tag Soup
3:00
Example: Tag Soup and Valid Doctype
4:45
HTML 4.01
5:26
Overview of HTML 4.01
5:27
Three Flavors of HTML 4.01: Strict, Transitional, and Frameset
6:05
XHTML 1
7:19
Overview of XHTML 1
7:20
Example: XHTML 1
9:20
XHTML1 Syntax
11:48
Lower Case Rule
11:49
Closed Elements Rule
12:25
Encased in Quotes Rule
14:18
Boolean Attributes May Not Be Minimized
14:35
Correct Nesting is Enforced
15:29
The Problem with XHTML
16:15
Problem with XHTML
16:16
XHTML 2
19:22
Overview of XHTML 2
19:23
HTML 5
20:43
Overview of HTML 5
20:44
Validating
22:44
Validators
22:45
Example: W3C Markup Validation Service
25:26
Page Structure and Meta-data Elements

32m 50s

Intro
0:00
The Doctype
0:12
Doctype
0:13
Example: Doctype
1:25
The Root Element
1:57
Root Element
1:58
Example: Root Element
2:45
The Head Element
3:38
Head Element and Body Element
3:39
Example: Head Element and Body Element
5:06
The Head Element
5:42
Head Element vs. Header Element
5:47
The Title Element
6:51
Title Element
6:52
Example: Title Element
7:54
The Base Element
9:00
Base Element
9:03
Example: Base Element
9:42
The Link Element
14:07
Link Element: rel, type, and href
14:08
Example: Link Element
15:13
The Meta Element
17:54
Meta Element: charset, name, and http-equiv
17:55
Example: Meta Element
21:00
The Style Element
23:35
Style Element
23:37
Example: Style Element
24:40
Text-Level Semantics

30m 13s

Intro
0:00
Text Level Semantics
0:06
Paragraph Level
0:07
The <a> Element
2:23
Definition of the <a> Element
2:25
The <em> Element
3:25
Definition of the <em> Element
3:26
The <strong> Element
6:50
The <strong> Element
6:51
The <small> Element
8:35
The <small> Element
8:36
Example of <small> Element
10:19
The <cite> Element
10:55
The <cite> Element
10:56
Example of <cite> Element
12:32
The <q> Element
12:45
The <q> Element
12:46
Example of <q> Element
13:34
The <abbr> Element
15:35
The <abbr> Element
15:36
Example of <abbr> Element
16:41
The <dfn> Element
17:03
The <dfn> Element
17:04
Example of <dfn> Element
18:01
The <time> Element
19:11
The <time> Element and Example
19:12
The <code> Element
21:18
The <code> Element
21:19
Example of <code> Element
23:00
The <sub> and <sup> Elements
23:31
The <sub> and <sup> Elements
23:32
Example of <sub> and <sup> Elements
23:50
The <i> Element
24:51
The <i> Element and Example
24:52
The <b> Element
27:16
The <b> Element
27:17
Example of <b> Element
29:07
Heading and Sectioning

23m 39s

Intro
0:00
Heading Elements
0:06
Heading Tags
0:07
Heading Rules
1:13
Heading Rules and Example
1:35
Sectioning Roots
5:39
Sectioning Roots
5:41
Sectioning Contents
6:25
Sectioning Content Elements
6:27
Section Wrapping
7:40
Section Wrapping
7:41
Example: Section Wrapping
10:10
Real World Example 1
15:36
Forms

47m 51s

Intro
0:00
Form Terminology
0:23
Form
0:24
Control
0:43
Control Name and Control Label
1:09
Input Type and State
1:52
Form Controls
2:20
Button: Submit and Reset
2:32
Radio
3:37
Checkbox
4:00
Select Menu
4:05
Textarea
4:28
Various Input Types
4:38
Example: Basic Controls of Form Element
7:05
Example: Buttons
18:20
Example: Additional Controls
20:56
Example: Special Input Types
27:55
Example: Date and Time Control
33:40
Example: Create Your Own Control
37:32
Example: Placeholder Text
39:10
Example: Datalist
41:43
Example: Sizing and Input Containment
42:16
Example: Select Modification
42:51
Example: Required Attribute
44:41
Links

36m 41s

Intro
0:00
URIs and URLs
0:23
Definitions of URL and URI
0:36
Differences Between URL and URI
0:42
Example: URI and URL
1:14
Typical URI Construction
2:33
Domain and Subdomain
2:34
Protocol
4:18
IP Address
5:05
Typical URI Construction
5:32
Second Level Domain
5:33
Port
6:07
Foldernames
6:46
Typical URI Construction
8:06
Filename and File Extension
8:08
Typical URI Construction
10:38
Name/ Value Pairs
10:40
Internal Anchors
11:45
Typical URI Construction
12:30
Example: URI Construction
12:31
Relative and Absolute URIs
14:20
Relative and Absolute URIs
14:22
Example: Relative and Absolute URIs
18:32
Link States
24:15
Link States
24:16
Example: Link States
25:18
Block Level Links
27:02
Example: Block Level Links
27:03
Bookmark Links
29:18
Bookmark Links
29:20
Example: Bookmark Links
30:15
Attributes
32:06
href and target
32:20
rel, media, hreflang, and type
33:18
Embedded Content

46m 5s

Intro
0:00
Embedding Image
0:22
Embedding an Image
0:25
Image File Formats
3:38
Image Format: Jpg
3:42
Image Format: Png
4:13
Image Format: Gif
4:40
Compression
6:05
Image Format: Precise Lines and Fewer Colors
8:38
Animated Gif
10:49
Alpha Transparency Png
11:09
Embedding Audio
12:52
Old Way of Embedding Audio
13:00
New Way of Embedding Audio
14:54
Example: Adding Buttons
20:04
Message for Users
26:36
Audio Attributes
27:46
Control
28:29
Autoplay
28:44
Loop
29:36
Preload
30:40
Embedding Video
32:00
Embedding Video
32:11
Controls
34:22
Poster Attributes
36:01
Video Formats
37:36
Solving Formatting Problem
39:26
The Canvas Element

19m 25s

Intro
0:00
Creating the Element
0:38
What is the Canvas Element?
0:39
HTML and Canvas Element
1:48
Example: Canvas Element
3:23
Creating the Canvas in JavaScript
5:13
getContext() Method
5:17
Checking Browser Support with the getContext() Method
6:00
Example: Creating the Canvas in JavaScript
7:31
Drawing in the Canvas
10:13
Methods for Drawing in the Canvas
10:14
2d Context
10:58
Example: Creating Drawing in the Canvas
11:39
Example: Adding an Image and Texts
15:30
Example: Advance Canvas Element
17:31
Content Models

29m 8s

Intro
0:00
The HTML 4.01 Content Model
0:16
Block Elements and Inline Elements
0:18
Example: Block Elements and Inline Elements
1:18
W3C Markup Validation Service
3:28
The HTML5 Content Model
6:21
Overview of HTML5 New Content Categories
6:22
Flow Content
8:02
Specification for Content Models
8:05
Flow Content
9:41
Example: Flow Content Elements
10:40
List of Flow Content
11:35
BlockQuote Element
11:50
Sectioning Content
13:19
Introduction to Sectioning Content
13:20
Heading Content
14:06
Heading Content and hgroup Element
14:07
Phrasing Content
16:56
Attributes of Phrasing Content
16:57
Anchor Element in Phrasing Content
17:28
Embedded Content
19:33
Attributes of Embedded Content
19:34
No Content
19:53
Transparent Content
20:38
Source Elements and Param Elements
21:15
Interactive Content
24:16
Interactive Content Elements
24:17
Button Element
25:57
The DOM

13m 10s

Intro
0:00
The DOM
0:26
Document Object Model
0:27
The DOM Tree
0:55
DOM Trees
0:56
Example: DOM Tree
1:31
Vocabulary: Tree, Node,Branch, Parent, Child
2:15
Exploring the DOM
3:13
Example: Built-in Browser Inspection and Firebug
3:15
Example: Manually Exploring the DOM
6:01
JavaScript
7:28
DOM Navigation Techniques
7:55
DOM Navigation Techniques
7:56
Favicons

13m 14s

Intro
0:00
Favorite Icons
0:08
Function of Favorite Icons
0:09
Bowser Support
1:10
Browser Support
1:13
Location in Browsers
1:46
Implementation Methods
2:04
Implementation Methods for Favorite Icons
2:05
Favicon and Apple Mobile Devices
4:51
Creating the Icon
6:13
How to Create the Icon
6:14
Favicon Resources
9:10
Websites for Icon Creation and Conversion
9:11
Programs for Icon Creation and Conversion
11:50
Embedding Flash and Other Objects

15m 7s

Intro
0:00
Flash and other Plug-ins
0:41
Main Problems with Flash
0:44
Benefits of Flash
2:02
Embedding Flash: the Old Way
2:57
The Old Way to Embed Flash
2:58
Embedding Flash: the Satay Method
6:42
Satay Method
6:43
Embedding Flash: HTML5
9:28
How to Embed Flash in HTML5
9:29
Embedding Flash Directly in <video>
11:39
Embedding Flash Directly in Video Element
11:40
Review of Embedding
13:24
Image Elements
13:39
Video, Audio, and Canvas Elements
13:44
Embed Elements
13:53
Object Elements
14:04
Offline Cache

19m 53s

Intro
0:00
Purpose
0:47
Purpose of Offline Cache
0:48
The Appache
2:06
Attributes of Appcache
2:07
The Manifest File
3:22
Manifest File
3:23
Example of Manifest
3:32
Section Headers: Cache, Fallback, and Network
4:21
Server-Side Considerations
5:17
text/cache-manifest MIME-type
5:18
Other Server-Side Considerations
5:41
ExpiresActive On and ExpiresDefault 'access'
6:07
Example: Offline Cache 1
7:44
Example: Overwriting Files
11:09
Example: Wild Cards for Network
14:58
Example: Offline Cache 2
16:06
Web Development Principles

26m 47s

Intro
0:00
Interoperability
0:36
Interoperability of Web Development
0:37
Interoperable Websites Should Work
3:05
Qualities of Interoperable Websites
3:06
Backward Compatibility
5:52
Compatibility With Older Technology
5:53
Example: Meta Tag
9:07
Forward Compatibility
9:33
Advancement in Technology
9:34
Accessibility
10:11
Accessibility of Content
10:12
Semantic Code
11:43
Example: Where Will This Link Take You?
13:56
Graceful Degradation
14:59
Graceful Degradation or Fault Tolerance
15:00
Types of Degradation
16:35
Progressive Enhancement
18:36
Progressive Enhancement
18:37
Future Detection and Browser Sniffing
21:05
Future Detection Versus Browser Sniffing
21:06
Example: Email Input Type
23:39
Tim Berners-Lee's Quote
26:20
Loading...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of HTML
  • Discussion

  • Download Lecture Slides

  • Table of Contents

  • Transcription

  • Related Services

Lecture Comments (4)

0 answers

Post by Eric Rapinchuk on May 10, 2012

add this at the top for the pic...


var img = new Image();
img.src = ("nightpan.jpg");
ctx.drawImage(img,0,0);

0 answers

Post by Eric Rapinchuk on May 10, 2012

This code works guys... ;)



<!DOCTYPE html>
<html>
<head>
<title>Canvas</title>
<link rel="stylesheet" href="css.css"></link>
</head>
<body onload="draw()"> <!-- I NEED THIS -->

<h1>Canvas Element</h1>
<p>This isn't an image, it's a canvas.</p>

<canvas id="draw" width="200" height="200">
Sorry, your browser doesn't support the canvas element :(
</canvas>
<script type = "application/javascript">

function draw() { <!-- i needed this?!!?!?!? -->
var paint = document.getElementById("draw");
var ctx = paint.getContext("2d");

ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);

ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (20, 20, 55, 50);

ctx.fillStyle = "rgba(0,200,0, 0.5)";
ctx.fillRect (30, 30, 55, 50);

ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (40, 40, 55, 50);

ctx.fillStyle = "rgba(200,0,200, 0.5)";
ctx.fillRect (50, 50, 55, 50);

ctx.fillStyle = "rgba(0, 200, 200, 0.5)";
ctx.fillRect (60, 60, 55, 50);
}

<!-- i took the if/else statement out :(-->

</script>
</body>
</html>

0 answers

Post by Richard C. Witt, Jr. on December 13, 2011

Brenton,
I've been able to replicate all the code example except this one. Did you have a CSS style sheet that was being referenced too? The only thing that appeared in my Browser was this:
Canvas Element

This isn't an image, it's a canvas

Nothing other than that appeared. I checked my code to make sure it was what you showed and I tried it in Firefox, Opera. Please advise.

Richard C. Witt
crgmohi@aol.com

0 answers

Post by Alisher Ulugbekov on January 23, 2011

Very instructive. Thanks Brenton.

The Canvas Element

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • Creating the Element 0:38
    • What is the Canvas Element?
    • HTML and Canvas Element
    • Example: Canvas Element
  • Creating the Canvas in JavaScript 5:13
    • getContext() Method
    • Checking Browser Support with the getContext() Method
    • Example: Creating the Canvas in JavaScript
  • Drawing in the Canvas 10:13
    • Methods for Drawing in the Canvas
    • 2d Context
    • Example: Creating Drawing in the Canvas
    • Example: Adding an Image and Texts
    • Example: Advance Canvas Element

Transcription: The Canvas Element

Welcome to Educator.com.0000

This lesson is going to be an introduction and an overview of the canvas element.0002

The canvas element is going to require some knowledge of JavaScript.0009

But you should be learning JavaScript anyway, if you are getting into HTML,0014

because that is where websites really get interesting--where you are doing interactive stuff.0017

I am going to be using a little bit of JavaScript in this lesson, but not too much.0022

This will just be sort of an overview to whet your appetite for getting into JavaScript, and getting into using the canvas element.0026

If you already know some JavaScript, then you can take this a lot further.0034

The canvas element (before I get into how to create it) is a new element in HTML5 that is sort of like an image, a video, or an audio tag,0041

except it is not a type of media that is pre-existing; it is one that is going to be edited on the fly, or created on the fly.0053

So, what it is: it is sort of like a canvas, like a painter would paint on.0063

And then, you, as the web developer, have the paintbrush; and you can paint into this canvas whatever you want,0067

using JavaScript: circles and things like this--and it is very versatile, because you can basically make anything.0073

And you can make it display different information, based on dynamically updating information,0081

based on user input, based on stocks, based on almost anything.0088

So, you can do almost anything with this.0093

In some ways, it is very much like Flash, except it doesn't require a Flash plug-in.0095

It will be supported in every browser that supports canvas; and it is already supported very well in a lot of good browsers today.0101

The first thing you need to learn how to do is create the HTML side of the canvas element.0109

The HTML part is just the canvas tag, very simply: <canvas>, and then </canvas>.0118

And that is basically it; the rest is just giving it little hooks and things, and taking into account backwards compatibility.0124

You will need to give it an ID; I have given it the ID of myCanvas here0134

(and that will allow you to grab it with JavaScript later), and then a width and a height, because there is not a default...0139

I think the default may be 150x300; but you can make it whatever you want.0145

And then, anything in the content of the canvas element is the fallback material.0152

So, if your browser doesn't support canvas, anything that goes in in here (and it can be any sort of flow content) will be displayed to the browser.0156

And so, you don't want to be giving it something that says, "Your browser can't do this; it's horrible."0167

You want to be giving it some alternative content, if possible.0172

So, say you are using canvas to do some stock update graph charts, or something like that.0175

You may just give a static image of a stock chart.0180

Or you can also give a very polite link to a place where they could upgrade their browser to something that will support the canvas element.0185

But you want it to be as useful as possible, and you want to give options.0198

Let's go over code really quickly, and I will create a canvas element.0204

This page here is just a basic page right now; it doesn't have anything in it.0210

But I am going to type the canvas element in--its case-sensitive ID.0217

And you don't need to specify units (in pixels or whatever).0236

Here is the canvas element--very simple.0247

And in its content, I am just going to put a little note...0249

OK, and if I were making an actual website, I would do something a little bit nicer than this--maybe find some fallback content.0265

And I have already prepared some CSS that gives the canvas some styling; I have given it a little border.0273

Now, when I load it in the page and reload (that was what you just saw--what I had prepared earlier), this is what is in the page now.0282

You get the canvas element; and it is 150x150, like I specified there.0292

And the CSS is giving it a little border; and that is it.0297

It is not an image; it is a canvas.0301

That is the HTML side of it--very simple; where it gets complicated is JavaScript.0305

JavaScript--before you can even get started with it, you need to create a reference to the canvas context in JavaScript.0316

Here, I have, in this sort of purple color, some variable names.0325

And you use the getContext method, and there are a lot of different contexts available.0330

In this case, I am getting the 2D context.0335

So, this grabs the myCanvas element, using the ID, and then applies this method to it and gets a context.0339

And that creates a context; and then, you can use that context to access the canvas in the HTML.0348

Another thing you can do with the getContext method is check for browser support of the canvas element.0360

In the last slide, we showed how to get fallback content in the HTML;0367

but you can also use JavaScript to make sure that the browser understands what to do with the canvas element.0371

This is basically the same thing as up here; you have myCanvas.getContext, the same as up here.0381

And of course, myCanvas is a variable that refers to the actual canvas element, which is what this JavaScript is doing.0388

And this check right here: if myCanvas.getContext...so, if your element that is the canvas element...0398

and then, you put this method on it; and if that works, it is going to evaluate as true.0405

If your browser doesn't know what to do with it--if your browser doesn't support the canvas element,0411

it is not going to know what to do with this method, and it is going to evaluate as false.0418

So, if it is true--if all of this evaluates as true--then you can create your canvas variable right here, myCanvas.getContext("2d").0423

And the 2d context is the context that we are using; but you can use different ones.0432

And then, that puts all of that into this variable.0437

And so, this variable right here, for the rest of your JavaScript session, will now be able to be used as a way of interacting with the actual HTML canvas.0440

A way of doing that: let's copy this code I have prepared--I am going to put it in this script element down here at the bottom (paste it).0456

And I am putting it in the bottom, not in the head, because this needs to refer to the canvas element here.0466

You see, it has this document.getElementByID('myCanvas'); and this myCanvas right here is looking through the ID's and finding this.0477

If you put the JavaScript in the head, the JavaScript will load before the HTML does.0486

And when it gets to this line, it is not going to find it, because it will not have loaded the HTML yet.0491

So, I am putting it after the HTML, just because it is a simple way of doing it.0498

Probably the best way to do it would be to put this script up in the head,0504

and then have an on-load event that waits until the document is finished loading before it executes this JavaScript.0507

But for the sake of this example, it is just simpler and cleaner to put it down here.0513

If I was making an actual website that I was going to put on the Internet, I would do this a little bit more elegantly.0517

This goes after, and so this variable canvas grabs this entire element.0524

And then, this check says, "this element.getContext--if that works, if the browser knows what to do with that,0533

then it is going to create this other variable, canvas.getContext."0540

And this is actually a mistake; this should be something like thecanvas, because you don't want two variable names that are the same (canvas and canvas).0546

That is corrected version there.0561

And then, if it doesn't work, it will throw an error; this is probably the worst way that you could throw an error--0565

giving an annoying alert that just says, "You don't support canvas," without actually giving any backup way of dealing with it.0571

But again, for this example, this is what I am going to do.0579

This is what is going to happen if this fails; it will throw this else.0584

That is the canvas element created in JavaScript now.0589

I refresh, and nothing changed, because all we did is create the JavaScript canvas element there,0597

and pulled up the actual context, which is the 2d context.0605

Now, to draw on the canvas, you need to be using a context.0615

We have already starting using the 2d context; the 2d context is defined at this URL.0620

I think it is in development right now, so that is why it is dev.0627

Eventually, it will be out of development, and then it will be a different URL, although this URL should be able to point you,0630

at that point, to the newer and more complete version of the context.0636

What a context does is: it defines ways to do different things.0641

In the 2d context (there is a 3d context--there are a lot of different contexts; there are browser-specific contexts)...0646

And anybody can make a context, and it can be extended out to whatever the future has to offer.0651

But looking right now at the 2d context, it defines ways to draw various types of shapes, various lines and curves, combining curves0659

and filling them in...segments of shapes, fragments of shapes...0669

You can add images--entire pre-ready images.0674

You can add text; you can control the colors of all of these different elements.0679

You can control the transparency; you can change the location; you can scale them, twist them, turn them, resize them, and things like that.0682

All of that is defined by this context that we are loading in.0693

And once you have loaded it in, then you can get started on actually creating your drawing.0697

Let's do that right in here: we are putting it in the part where, if it evaluates as being able to use it, it creates the canvas.0709

And the first thing we will do is draw a rectangle and paste in some code.0724

What this code here does is draws a rectangle.0731

canvas grabs the entire canvas context that you have created in JavaScript.0738

And fillStyle will just describe the color, basically, because we are going to create a square rectangle that is filled.0744

The fillStyle--this gives you the color: this is red, green, blue--you can think of it as hex, so this is red; this is green; this is blue.0753

This will just be red; it has 200.0760

And then, this is actually drawing into the canvas.0762

These parameters here give you the location and the size.0770

This is, I think, left top; so how many pixels from the left? how many pixels from the top?0774

The rectangle is going to start, and then this is the width and the height.0781

I am saving this, and so now, when I refresh this, there will be a little red square; I have to save first, and there it is.0786

You can see, it is ten pixels from the left, ten pixels from the top; and then, its size is 55x50, as specified right here.0799

And you can also do a little more: for example, you can add transparency.0807

Let's copy this code and create another one just like it.0823

But let's make this one, not red, but--let's make it this color; 200...0829

But then, let's add another little parameter here of 0.5; and this last one is going to be the transparency.0837

This will show up as 50% transparent.0848

And now, I am going to move it down; the size is 150 right now, so let's move it down to, say, 45x45.0853

Save; oops, it is still red--I made a mistake here.0868

This needs to be rgba for alpha transparency; there.0889

So now, you can see that the blue one is 50% transparent, and it overlaps here.0898

So, if I didn't have this a in here, and I didn't have this, then it would just be blue, and it wouldn't be transparent, and you couldn't see through it.0904

So, this shows the power of a canvas element.0914

All right, the last thing I am going to go through is: I am just going to show some other things you can do here.0922

Say you want to add an image--this image: newyork.jpg.0939

I will actually load it for you, so you can see it if you want.0949

It is just a long panoramic image of New York; OK.0955

First, you need to define the image right here, and then this method right here, drawImage.0963

And then, you put the name of the image (which is this variable right here), and then the position.0975

And I think I have this set up wrong; I am going to copy from over here instead--I want this code, because you need to define the image first.0980

You create the image element first; and then you set the source to the URL.0996

And I'll make it 00, so it fills the whole screen.1005

Go over to the browser; and it loads the image in the canvas element.1010

Another thing we can do is add text.1024

This is just another method: you add some text here as the first parameter, and then these two parameters are the location.1034

And there you see: it says "Hello world."1044

And I can't select it, because it is kind of an image; it is in the canvas.1047

That is just a few really basic things you can do to the canvas, but you can get a lot more complicated.1052

Here is an example I created yesterday; and I am going to zoom in.1059

First of all, I put that image again; but it is much wider than the canvas screen actually is.1066

So, what I am going to do is scroll it to the left.1076

And I also put a little rectangle here that is blue and somewhat transparent.1079

And even though I have set this in terms of the number of pixels from the left and the top,1086

because it is relative to the canvas, I can actually (using some other JavaScript) increase the size of the canvas.1094

This is just using CSS to increase the size of the canvas, just so you can see a little better.1100

And now, I have also set up so that, when I click on this, it will do this little thing where I can control the square's location with my arrow keys.1106

And it is transparent, so you can kind of see the buildings through it.1121

And you can imagine how I can develop this into a side-scrolling game--something like where you are shooting little aliens or whatever.1124

There is a lot that you can do with this; and this took me just probably half an hour of coding to put this together, and come up with the idea, and everything.1133

And I can increase the speed; and if I wanted to put a little more effort into it,1145

I could have loaded a little spaceship (or something) image, instead of just the square.1148

And basically, the only limits are what you can think of for the canvas element.1154

That is that; thanks for watching Educator.com.1163

Educator®

Please sign in for full access to this lesson.

Sign-InORCreate Account

Enter your Sign-on user name and password.

Forgot password?

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for Educator.com

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.

Use this form or mail us to .

For support articles click here.