Pen Settings



CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource


Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource


Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.


Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.



  In the last section of unit 6, we learned that we have the ability to transform raw data into information that has meaning to someone by organizing or representing the data in a certain context, thus creating information.
  We gained experience transforming raw data into information and printing that information to the console; this provided information to ourselves as we knew the context of the statements and results being printed to the console.

  We also gained experience transformig the raw data sets we've seen into information digestible by other people by presenting it in an easy to read and understand tabular format (when we generated the table of new residential buildings in baton rouge)

  In this unit, we are going to continue with the goal of transforming raw data into information in mind, while learning ways to better convey and present the information visually

  We are going to accomplish this by learning about HTML canvas, and what we can achieve with it

  HTML Canvas is the name used to refer to all of the actions we can do with the use of the <canvas> element and a scripting language, in our case, JavaScript.

  Essentially, <canvas> is the tag for an HTML canvas element, which can be used with scripts to draw graphics on an HTML page.

  You may wonder why we would want to draw shapes and graphics using HTML Canvas instead of just drawing a circle in photoshop or paint and inserting it as an image,

  but by using HTML canvas, we can have live, up to date data representation and visualization instead of having to regraph visualizations of data when the data is updated,

  and we can also go as far as to make these canvas elements interactable, animated, and more actions which we wouldn't necessarily be able to achieve as easily if we were to just place an image in our HTML code.

  Canvas objects are extremely versatile; they can be simply or complexly animated, respond to JavaScript events to make then as interactive as you wish, and they can even play a role in gaming apps developed in HTML.

  First we'll cover the basic syntax for HTML Canvas, as we do with each new topic we tackle, and then we can begin drawing in the next section.


<!---------------------   HTML Canvas Syntax   ----------------------------->


As we know, canvas is an HTML element, the tag for which is simply <canvas></canvas>

Though Canvas is an HTML element, the rest of the work is done using JavaScript, or some other kind of scripting language.

Even if we aren't making the canvas element animated or interactable, we use JavaScript to achieve whatever we want to do with canvas by using various methods available to us.

You can basically think of it like this: in our HTML, we declare a new canvas element the same way you would get a new, blank canvas if you were going to do a painting.

However, when it comes time to start painting, JavaScript is responsible for acting as the paint brushes and paint, while the canvas we set up in our HTML gives us a space to paint on.

So, once you've created your blank canvas in HTML, you can go to town using JavaScript.

There are a few attributes you can set up in the declaration of your canvas, however.

These include an identifier either by class or ID, height and width, and/or any styling you'd like to place onto the canvas, such as a border.

Of course, as you know, you can always set these attributes through JavaScript rather than during the creation of the canvas element, aside from the class name or ID.

Once we've created the canvas element in our HTML, as we do below, we can move over to the JavaScript side to see how to create things using canvas:


<canvas id="blankCanvas">



border: 1px solid #aaa;


Pssst Start in the HTML section first 

  If you're not exactly sure what canvas is capable of achieving, the examples in this section will serve as a better explanation than a definition will.
  With canvas and JavaScript, we can literally draw shapes and objects, and therefore also graphs, graphics, and visualizations by programming properties, strokes, and functions with JS.
  You can essentially draw or create any text or shape, try googling a few example images to get an idea of the range of capabilities canvas has
  Of course, those examples will give you only an *idea* of the range of capabilities canvas has because its essentially limited to your imagination and what you choose to design/create with canvas and JS.
  In this section, we're going to cover the basic steps you need to take when working with a canvas object.
  We'll begin to cover the methods that allow us to draw and create shapes and text in the next section, 
  but as of right now all we are concerned with is associating a javascript variable with the HTML canvas, and setting the height and width attributes of that canvas through JavaScript.
  With each canvas element you work with, there are about 4 lines of code that you will always have. We're going to cover these four important lines now:
  Before we can get started adding the strokes to create shapes, we first have to use one of the HTML DOM methods you have plenty of experience with to grab the canvas
  Remember you can get the element by class name or ID, amongst other things such as tag name.
  Since we created our canvas with the ID "blankCanvas", we can use the getElementById method to store the association to our canvas element in a JavaScript variable:


let canvas = document.getElementById("blankCanvas");

// This is the first task you'll want to complete when working with a canvas.
// Next, since we didn't set the height and width to a specified pixel size in the HTML when we created the element, we need to set it through our JS
// This will be the next 2 lines you'll always want to include, considering the canvas' height and width is not already set:

// Let's set the width and height of the canvas
// Remember that this can be done in the canvas element's HMTL if you're setting the width and height to a specific pixel or some other dimension
// However, we can also set these properties through JavaScript, which will also allow us to set the values to the width and height of the window, like so:
// Setting the width and height to that of the browser window's viewport in pixels, without us having to do anything else
// You can consider this a safe default when working with canvas, to default the width and height of the canvas to that of the window's viewport

canvas.width = window.innerHeight;
canvas.height = window.innerHeight; 

// The final important line you'll always want to include pertains to a method you haven't seen before:

/* Next we'll look at a method necessary for us to 'draw' on the canvas, .getContext()

   The getContext() method is applied to an HTML Canvas Element object; that is, a variable storing the reference to a canvas element, such as our blankCanvas being stored in the 'canvas' variable
   The method takes a parameter that specifies the context type of the drawing that will be associated with the canvas
   Of the four possible types (2d, webgl, webgl2, and bitmaprenderer), we will only concern ourselves with the 2d type for now
   Passing in 2d as the parameter for the getContext() method tells the canvas that we will be creating a CanvasRenderingContext2D object, 
   in otherwords, that we will be creating a 2d drawing using this canvas, so the context is 2d.
   The CanvasRenderingContext2D interface is what actually achieves the 'drawing' of shapes, text, and images; 
   this is what supplies us with the methods to draw shapes through mathematics and programming, such as the lineTo, moveTo, and fill methods to name a few, which we will discuss in depth the next section
   A list of all of the methods can be found here: 
   But before we can use these methods, remmeber that we must set the context of our blankCanvas to 2d:


   let draw = canvas.getContext("2d");

   // Note that we declare a new variable, draw, and set it equal to the implementation of the getContext method
   // Now that we have specified that the context of our canvas is 2D, we can use any of the methods on the draw variable:

   // Below are examples of what we will be able to achieve with canvas by the end of the next few sections; you aren't required to understand how these were created as of right now.

draw.font = "30px Arial";
draw.strokeText("Helloooooo Chiiiilllddreeennzzz", 10, 50);