alyssamichelle/canvas-course: Source code for egghead.io HTML Canvas Course

# Drawing in HTML canvas

Canvas allows us to draw graphics inside our web apps HTML. In this lesson, we’ll learn how to create a `canvas` element in our HTML. We will then grab our `canvas` element using JavaScript, create a 2d context, and use that context to draw on the screen!
## Code Example
- https://plnkr.co/edit/Gt79mZCosXq4zIRHJjoJ?p=preview
## Resources:
- Drawing shapes MDN: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes
- Applying styles and colors MDN: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <h1>Drawing Shapes in HTML Canvas</h1>
    <canvas id="canvas"></canvas>

    <script src="script.js"></script>
  </body>

</html>

var canvas = document.querySelector('#canvas');
canvas.width = canvas.height = 500;

var context = canvas.getContext('2d');
context.fillRect(0, 0, 50, 50);

// Lesson 3
// # Specifying height and width of your base canvas element
// Let's take a look at some bugs you can run across, by not specifying height and width of your HTML Canvas element. We will look at giving the canvas height/width inline and in the JS.
// Show skewed square and skewed circle


// Now what happens when we try to make our rectangle any other size, other than the canvas width and height?
// context.fillRect(0, 0, canvas.width, canvas.height);
// context.fillRect(0, 0, 50, 50);

// We end up with something that is NOT 50x50, but rather rectangle shaped. What is going on here?

// This is happening bc we have not given our canvas a set width and height. (Specifying in CSS does not count for this issue). If we simply specify the width and height inline, like so:

//     <canvas id="canvas" width="500" height="500"></canvas>

// remember, no units are given here to the canvas element, then we refresh and see now that our rectangle is obeying the width and height we provided in the `fillRect()` method.

// If we wanted, we could also do this in the JS, instead of inline:
// canvas.width = canvas.height = 500;

// I prefer to set it inline in my html and forget about it, but either will work!

canvas {
  width: 500px;
  height: 500px;
}