Reference
- Context2D
- clearRect() 0 / 2
  context.clearRect()
  context.clearRect(x, y, width, height) will clear a rectangle starting at (x, y) and clearing to the right width and down height.
  
  This code will produce the image below:
  
  context.fillStyle = '#FF0000'; context.fillRect(0, 0, canvas.width, canvas.height); context.clearRect(40, 20, 20, 100); context.clearRect(60, 60, 20, 20); context.clearRect(80, 20, 20, 100); context.clearRect(120, 20, 60, 20); context.clearRect(140, 40, 20, 60); context.clearRect(120, 100, 60, 20);
- fillRect() 0 / 6
  context.fillRect()
  context.fillRect(x, y, width, height) will draw a rectangle starting at (x, y) and filling the area "width" to the right and "height" down.
  
  This code will produce the image below:
  
  context.fillRect(50, 50, 300, 200);
- fillStyle 0 / 3
  context.fillStyle
  context.fillStyle will set the color for all future fills such as context.fillRect(). It's important to note theat context.fillStyle is not a method, it is an attribute. You set it like so:
  
  context.fillStyle = 'red';
  
  This code will produce the image below:
  
  context.fillStyle = 'rgb(0,255,0)'; context.fillRect(50, 50, 100, 200);
- lineTo() 0 / 6
  context.lineTo()
  context.lineTo(x, y) creates a path from the current point - default (0,0) - to the point (x, y). In order to see the line you must call context.stroke().
  
  This code will produce the image below:
  
  context.beginPath(); context.moveTo(50, 50); context.lineTo(100,100); context.lineTo(150, 50); context.lineTo(200, 100); context.stroke();
- save() / restore() 0 / 5
  context.save()
  context.save() saves all of the properties of the context. Then, when you call context.restore() it will reset all changes to the context you've made.
  
  This code will produce the image below (note how the second rectangle is black and closer to the original origin despite calling translate and setting the fillStyle earlier):
  
  context.save(); context.translate(100,50); context.fillStyle = 'red'; context.fillRect(10, 10, 25, 25); context.restore(); context.fillRect(10, 10, 25, 25);
- scale() 0 / 7
  context.scale()
  context.scale(percentX, percentY) scales the x and y coordinates of the context, making drawings larger or smaller.
  
  This code will produce the image below (note that all rectangles are defined to be the same size in the code are drawn in different sizes due to the scale of the context):
  
  context.fillRect(25,25,25,25); context.scale(2, 1); context.fillRect(75,25,25,25); context.scale(0.5, 1); context.fillRect(150,25,25,25); context.scale(2, 2); context.fillRect(300,25,25,25);
- translate() 0 / 6
  context.translate()
  context.translate(x, y) shifts the origin of the context (where the (0,0) point is) right by x and down by y. This allows you to draw execute multiple commands in a specific area of the context more easily.
  
  This code will produce the image below (note how the fillRect commands are relative to the translation point (100,100)):
  
  context.translate(50,50); context.fillStyle = 'red'; context.fillRect(0, 0, 100, 100); context.fillStyle = 'green'; context.fillRect(10, 10, 25, 25);
- Math
- round() / floor() / ceil() 0 / 3
  
  Math.round() / Math.floor() / Math.ceil()
  
  Math.round(), Math.floor() and Math.ceil() will round a number to an integer. Math.floor() will always round down while Math.ceil() will always round up. Math.round() will round to the closest integer, either up or down.
- random() 0 / 4
  
  Math.random()
  
  Math.random() will produce a random decimal betweek 0 and 1. Calling it many times will produce a different random number each time.
  
  Often you will multiple Math.random() by another number to get a random integer larger than 1. You may also call Math.floor() or Math.ceil() on the result to get an rounded integer.

Concepts
- Variables 0 / 5
  
  Variables
  
  A variable allows you to store information to use or change later.
- For Loops 0 / 6
  For Loops
  For-loops allow you to repeat code over and over again, potentially adjusting the code a little bit each time.
  
  The following code will produce the picture below:
  
  for (var i=1; i<10; ++i) { context.fillRect(10 * i, 75 - (5 * i), 10 * i, 10 * i); }
- While Loops 0 / 3
  While Loops
  While-loops allow you to repeat code over and over again until a condition is met.
  
  The following code will produce the picture below:
  
  var i = 10; while (i < 200) { context.fillRect(5, 5, i, 50); i += 10; }
- Coordinates 0 / 3
  
  The Coordinate System
  
  The coordinate system consists of X and Y values starting at (0, 0) in the upper left corner.
  
  As you move down the canvas Y gets larger. As you move right on the canvas X gets larger.
  
  So the point (100, 50) means you move right 100 and down 50.
- Functions 0 / 5
  Functions
  Functions allow you to create chunks of code that can be called with different parameters.
  
  The following code will produce the picture below:
  
  function fillColorRect(x, y, w, h, color) { context.save(); context.fillStyle = color; context.fillRect(x, y, w, h); context.restore(); } fillColorRect(50, 50, 50, 50, 'red'); fillColorRect(150, 50, 50, 50, 'blue'); fillColorRect(250, 50, 50, 50, 'green');
- Switch Statements 0 / 4
  Switch Statements
  Switch statements allow you to perform different code depending on the value of a variable.
  
  The following code will produce the picture below (the switch statement only performs the code inside of case 2 because "i" is set to 2):
  
  var i = 2; switch (i) { case 1: context.fillStyle = 'red'; break; case 2: context.fillStyle = 'yellow'; break; case 3: context.fillStyle = 'blue'; break; } context.fillRect(50, 50, 100, 50);
- setInterval()
  setInterval()
  setInterval() allows you to execute code at specified intervals. It is frequently used to create animations.
  
  This code will produce the image below:
  
  var index = 0; function count() { context.font = "20px serif"; context.textAlign = 'center'; context.fillText(index, canvas.width / 2, canvas.height / 2); } setInterval(count, 1000)
- Event Listeners
  Event Listeners
  Event listeners allow you to "listen" for an event, such as a click, on an element in your html.
  
  A full list of events can be found here: HTML5 Events
  
  This code will produce the image below (if you were to click and draw the letters on the canvas):
  
  canvas.addEventListener('mousemove', function(e) { if (e.buttons === 0) return; context.fillRect(e.layerX - 3, e.layerY - 3, 7, 7); });

Event Listeners

What is an event listener?

Visual1

Everything you see on a website has a number of different events you can "listen to".

Common events include (but are not limited to):

click
mouseup
mousedown
mouseover
keypress
keydown
keyup
focus
blur

You can find a full list of HTML5 events here: HTML5 Events

Rainbow Clicking

Here we use an event listener to listen for a click on the canvas. When the click is received we draw a rainbow design radiating out from the click.

Editor (write code below)

var canvas = document.getElementById('event_listeners_example1'); var context = canvas.getContext('2d'); var increment = 20; var colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']; function drawColor(centerX, centerY, specificIndex, generalIndex) { context.save(); context.globalAlpha = 1 - (generalIndex * 0.05); context.fillStyle = colors[specificIndex % colors.length]; var size = specificIndex * increment; var x = centerX - (size / 2); var y = centerY - (size / 2); context.clearRect(x, y, size, size); context.fillRect(x, y, size, size); context.restore(); } function drawColors(centerX, centerY, index) { for (var i=index; i>=0; --i) { drawColor(centerX, centerY, i, index); } } function rainbowAnimation(centerX, centerY, index) { drawColors(centerX, centerY, index); setTimeout(function() { if (index < 20) { rainbowAnimation(centerX, centerY, index + 1); } }, 20); } canvas.addEventListener('click', function(e) { rainbowAnimation(e.layerX, e.layerY, 1); }); context.save(); context.font = "20px serif"; context.textAlign = 'center'; context.fillText('Click Anywhere!', canvas.width / 2, 50); context.restore();

Message Log

This is a lesson, not a challenge, the code runs automatically.

But change it! Play with it! Click "Run" to see your changes.

Run

Run and Focus Canvas

Reset

Canvas (your drawing will display here)